#javascript #prototypejs #flotr
#javascript #prototypejs #flotr
Вопрос:
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv', {
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
},
onFailure: function(){ alert('Something went wrong...') }
});
function drawChart(data)
{
for (var i = 0; i < data.jobs.length; i ) {
priceData.push([i, data.jobs[i].INCPU]);
dateData.push(data.jobs[i].Dater);
}
}
После завершения только drawchart(data)
метода я хочу выполнить приведенный ниже код
но, к сожалению, функция HumbleFinance.init
вызывается с пустыми данными.
Пожалуйста, скажите мне, как это решить. Я не могу поместить приведенный ниже код внутрь функции drawChart (данные)
HumbleFinance.init('finance', priceData , dateData);
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
var date1 = dateData[xmin];
var date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] ' - ' dateData[xmax]);
});
});
Комментарии:
1. Поместите это в
onSuccess
функцию.2. Примечание с одной стороны: вы знаете, что создаете глобальные переменные во втором фрагменте кода (
xmin
иxmax
), не так ли?
Ответ №1:
Ваш вызов HumbleFinance.init()
выполняется до того, как вы получите ответ ajax и обработаете результаты данных. Вам нужно убедиться, что вы обработали свой ajax-ответ, прежде чем вызывать это init
. Для этого вы просто перемещаете init
вызов в пределах onSuccess
обратного вызова после drawChart
вызова метода.
<script>
Event.observe(document, 'dom:loaded', function() {
new Ajax.Request('/HumblFin/Serv', {
method:'get',
onSuccess: function(transport){
var data = transport.responseText.evalJSON();
drawChart(data);
//Put your HumbleFinance.init call here,
//after the priceData and dateData has been generated.
HumbleFinance.init('finance', priceData , dateData);
},
onFailure: function(){ alert('Something went wrong...') }
});
Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
var area = e.memo[0];
xmin = Math.floor(area.x1);
xmax = Math.ceil(area.x2);
var date1 = dateData[xmin];
var date2 = dateData[xmax];
$('dateRange').update(dateData[xmin] ' - ' dateData[xmax]);
});
});