Is there any way to display loading in chrome when using async:false in ajax call. With settimeout there is many problems when using more than one ajax sync call within settimeout funcion. And loading works well without settimeout in firefox but not working in chrome.
Output of the below code is it display loading after ajax call completes for 2 second.
Code:
function setDetails() {
debugger;
jQuery('loading').show();
ajaxindicatorstart('loading data.. please wait..');
setTimeout(function () {
var serverUrl = location.protocol + "//" + location.host;
var oDataUri = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
debugger;
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataUri,
async: false,
beforeSend: function (XMLHttpRequest) {
ajaxindicatorstart('loading data.. please wait..');
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
debugger;
var isDomainExists = false;
if (data == null || data.d.results.length <= 0 ) {
debugger;
//other code
oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet";
debugger;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataUri1,
data: jsonPO,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
debugger;
checkInCRM();
ajaxindicatorstop();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error while store license data: " + errorThrown);
}
});
}
else {
if (keyDetail != data.d.results[0].new_var)
{
oDataUri1 = serverUrl + "/XRMServices/2011/OrganizationData.svc/new_pasm_tblSet(guid'" + id + "')";
debugger;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataUri1,
data: jsonPO,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
checkInCRM();
ajaxindicatorstop();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error while store license data: " + errorThrown);
}
});
}
else {}
}
ajaxindicatorstop();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error while getting license data: " + errorThrown);
onclickflag = false;
}
});
ajaxindicatorstop();
}, 10);
}
function ajaxindicatorstart(text) {
if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') {
jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="new_loading.gif"><div>' + text + '</div></div><div class="bg"></div></div>');
}
//
jQuery('#resultLoading').css({
'width': '100%',
'height': '100%',
'position': 'fixed',
'z-index': '10000000',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'margin': 'auto'
});
jQuery('#resultLoading .bg').css({
'background': '#000000',
'opacity': '0.7',
'width': '100%',
'height': '100%',
'position': 'absolute',
'top': '0'
});
jQuery('#resultLoading>div:first').css({
'width': '250px',
'height': '75px',
'text-align': 'center',
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'margin': 'auto',
'font-size': '16px',
'z-index': '10',
'color': '#ffffff'
});
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeIn(300);
jQuery('body').css('cursor', 'wait');
}
function ajaxindicatorstop() {
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeOut(300);
jQuery('body').css('cursor', 'default');
}
Please suggest any way to display loading.