Reputation: 1
I am a beginner. I try to create loading image while getting data by this code.
$('#loading-image').ajaxStart(function () {
$(this).fadeIn('fast');
console.log("1st call");
}).ajaxStop(function () {
$(this).stop().fadeOut('fast');
});
So I create image in
<div id="loading-image" style="display:none"><img src="img/loading_img.gif"></div>
The image just show only this ajax calling
$('#select_company').change(function(){
if(this.value!="")
{
$.ajax({
url: "get_list.php",
async: true,
dataType: "json",
type: "post",
data: {
"select_company": $("#select_company").val(),
"get_list": "div"
},
success: function (data) {
$('#myTable').empty();
clear_list('div','Select Division');
if(data!=null){
$.each(data, function(key, value) {
$('#select_div')
.append($("<option></option>")
.attr("value",value)
.text(key));
});
}
}
});
}
else
{
clear_list('div','Select Division');
}
});
But it don't show loading image when i calling data from this function
function getSubData(prodId,stationID) {
var data_return = null;
$.ajax({
url: "get_sub_data.php",
async: false,
type: "post",
dataType: "json",
data: {
"ProdID": prodId,
"StationID": stationID
},
success: function(res, textStatus, jqXHR) {
data_return = res;
console.log(data_return);
},
});
return data_return;
}
What should i do. I tried another way to create image loading such add
$("#loading").show();
at the first line after function before call ajax and hide image after ajax success. It works only in the first function that i said.
Addition. Is it probably affect from my code calling ajax like this
function createTable(data,columnTable){
var content = '<table border="1" cellspacing="0" class="table table-bordered"><thead><tr><th>No.</th><th>Job</th><th>Lot</th><th>จำนวน (Plan)</th><th>จำนวน (Actual)</th>';
for(var i = 0 ; i< (columnTable.length) ; i++){
if(i == (columnTable.length)-1){
subColToExcel += columnTable[i];
}else{
subColToExcel += columnTable[i]+",";
}
content += '<th>'+columnTable[i]+'</th>';
};
content+= '</tr></thead><tbody>';
for(var i = 0 ; i< (data.length) ; i++){
var number = i+1;
var strData = '';
content += '<tr>';
content += '<td align="center">'+number+'</td>';
for (var j = 1; j < data[i].length ; j++){
var item = data[i];
strData += item[j]+",";
content += '<td align="center">'+item[j]+'</td>';
}
var subData = getSubData(data[i][0],columnTable);
for (var z=0; z < (columnTable.length) ; z++ ){
if(z == (columnTable.length)-1){
strData += subData[z];
}else{
strData += subData[z]+",";
}
if(subData[z]==' - '){
content += '<td bgcolor="#808080" align="center">'+subData[z]+'</td>';
}else{
content += '<td align="center">'+subData[z]+'</td>';
}
}
if(i == (data.length)-1){
dataToExcel += strData;
}
else{
dataToExcel += strData+"///";
}
content += '</tr>';
}
content += '</tbody></table>';
// console.log(dataToExcel);
document.getElementById("myTable").innerHTML = content;
}
The table will create when user click button as follows
function clickShowReport()
{
data_backup = getAjaxData();
column_table = getColumn();
if($("#select_div").val() == ''){
alert("Please select division");
}
else{
if(data_backup.length == 0||data_backup[0].length==0)
{
show_error();
data_backup = null;
} else
{
createTable(data_backup,column_table);
}
}
}
The image don't show while ajax call data in getSubData function, getAjaxData function and getColumnFunction.
Upvotes: 0
Views: 753
Reputation: 74748
You have to do two things in your code:
global:false
in jQuery.ajax()
method and $(document).ajaxStart()/.ajaxStop()
you have to delegate to only to the document. $.ajax({
url: "get_sub_data.php",
async: false,
global:false, //<-----use here to exclude
type: "post",
});
and this has to be changed like:
$(document).ajaxStart(function () {
$('#loading-image').fadeIn('fast');
console.log("1st call");
}).ajaxStop(function () {
$('#loading-image').stop().fadeOut('fast');
});
Or there is another way like:
var app = app || {};
app.ajaxstart = function(){
$('#loading-image').fadeIn('fast');
};
app.ajaxstop = function(){
$('#loading-image').stop().fadeOut('fast');
};
$.ajax({
url: "",
type: "",
beforeSend : app.ajaxstart, //<----use it here before execution
success:function(){},
error:function(){},
complete:app.ajaxstop //<---use it here to remove whether ajax has success or error.
});
Upvotes: 1
Reputation: 29693
It should be $(document).ajaxStart
instead of $('#loading-image')
$(document).ajaxStart(function () {
$('#loading-image').fadeIn('fast');
console.log("1st call");
}).ajaxStop(function () {
$('#loading-image').stop().fadeOut('fast');
});
I strongly feel that .stop()
is not needed. Just fadeIn
and fadeOut
are fine in your case. Try removing that once. May be irrelavent here
Upvotes: 2