[英]How to use jQuery to postpone setting event listeners until after ajax call and rendering has finished?
[英]AJAX call prevents navigating to other pages until it has finished
这是我的 HTML5 仪表板页面的流程,该页面异步显示多个 Google 图表。
这是一个非常酷的仪表板:-)
问题来了:当我单击同一页面上的另一个超链接(例如指向“设置”页面的链接)时,浏览器的进度图标会旋转,并且在所有图表完成加载之前它不会导航到新页面。
我认为进行“异步”调用可以让您离开页面。 即使所有图表都没有完成加载,我也想离开图表页面。
我正在使用 Microsoft IIS 作为 web 服务器和 PHP 7.4。
这是我进行 AJAX 调用的代码。
function drawChart(chartType, chartDivName, dataFileName, dataFileParam1, dataFileParam2) {
var chartDiv = document.getElementById(chartDivName);
// first, display the loading message
chartDiv.innerHTML = "<img class='img-fluid' src='/images/loading.gif' alt='Loading...'>";
// get the data asynchronously
$.ajax({
url : dataFileName,
method : "POST",
data : {param1: dataFileParam1, param2: dataFileParam2},
dataType : "JSON",
async : true,
success : function(data) {
displayChart (chartDiv, data);
},
error : function(xhr, status, error) {
chartDiv.innerHTML = "show the error";
}
});
} // end drawChart
这就是我调用上述 function 的方式:
<!-- Load charts -->
<script>
// set the reportDate variable and the report-date form field
reportDate = getYesterdayDate();
$('#report-date').val(reportDate);
/*
**
** Place all charts and dynamic data calls that need to be loaded on the pgae in this function.
** This function should include the call to loading the daily charts.
**
*/
function loadAllCharts() {
//load daily charts and dynamic data
loadDailyCharts();
// load non-daily charts and dynamic data
getHtmlData("mtd-order-total", '/om/data/mtd_om_total.php', '', '');
getHtmlData("mtd-ar-total", '/ar/data/mtd_ar_total.php', '', '');
drawChart('column', 'monthly-orders-chart', '/om/chart-data/monthly_om_totals.php', '', '');
drawChart('column', 'monthly-ar-chart', '/ar/chart-data/monthly_ar_totals.php', '', '');
}
/*
**
** Place all charts and dynamic data calls that need to be refreshed when the date field is changed
** in this function.
**
*/
function loadDailyCharts() {
//load dynamic data
getHtmlData("yday-order-total", '/om/data/daily_om_total.php', reportDate, '');
getHtmlData("yday-ar-total", '/ar/data/daily_ar_total.php', reportDate, '');
// load charts
drawChart('single-column', 'day-orders-chart', '/om/chart-data/daily_om_by_source.php', reportDate, '')
drawChart('single-column', 'day-ar-chart', '/ar/chart-data/daily_ar_by_type.php', reportDate, '');
}
// Load all charts on page load
google.charts.setOnLoadCallback(loadAllCharts);
// Reload charts when report-date is changed
$('#refresh-report').click(function() {
reportDate = $("#report-date").val();
loadDailyCharts();
});
</script>
your.ajax 调用是从 $(document).ready jquery function 进行的吗? 在该上下文中进行的 AJAX 调用可能会阻止在初始 Javascript 执行后触发的 window.load() 事件。 尝试使用 window.load() 而不是 document.ready()。
仅供参考——这只是我最好的猜测。 如果您可以与我分享您的 html 以及围绕您的函数调用的 Javascript,我可以做出更好的猜测。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.