أقوم بتحميل العديد من الرسوم البيانية الخطية d3 في تطبيق Ruby on Rails وأريد عرض صورة تحميل (gif) بينما أنتظر استجابة بياناتي لملئها.
ما هي أفضل وأسهل طريقة للقيام بذلك؟ هل يجب أن أضع بعض jQuery داخل مكالمة Ajax أو قبلها ، ربما؟
أبعث طلب ajax لبعض .json وأرسم الرسوم البيانية في ملف .js يبدو كالتالي:
my_d3_file.js:
var loadData = function () {
var path = window.location.pathname.split('/');
var site_id = path[path.length - 1];
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/data_reports.json?site_id=' + site_id + '&graphable=true',
dataType: 'json',
success: function (data) {
drawGraphs(data)
},
failure: function (result) {
error();
}
});
function drawGraphs(data) {
var svg = d3.select("#plot1").append("svg")...
// etc, code for d3 graphs
}
$(document).ready(function () {
loadData();
})
يبدو html الخاص بي مثل هذا:
my_graphs.html.erb
<div id="plot1" class="plot"></div>
تبدو بنية ملف My Rails كما يلي:
assets
images
my_loading_image.gif
javascripts
my_d3_file.js
stylesheets
my_css.css
views
graph_folder
my_graphs.html.erb
هل هناك شيء مثل هذا جعلني أبدأ؟ لست متأكدا من أين يجب وضع كل شيء ، وتحديدا في ملف JavaScript ، فيما يتعلق بمكالمة ajax.
من الداخل ("# plot1"):
<img src="../../assets/images/ajax-loader.gif" id="loading-gif"
style="display:none" />
//also, is my file path correct?
في بلدي المغلق:
#loading-indicator {
position: relative;
left: 10px;
top: 10px;
}
في my_d3_file.js:
$(document).ajaxSend(function(event, request, settings) {
$('#loading-gif').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-gif').hide();
});
شكرا جزيلا! اسمحوا لي أن أعرف إذا كان يمكنني تقديم مزيد من المعلومات!