Geek Answers Handbook

Jquery ajax load div not working in IE and Chrome

This has been asked many times. But none of the solutions work for me in IE and Chrome.

Basically I want to show the boot image while an ajax call is being made.

Here is what I am trying to do.

function ws(){ showL(); var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText; $('#dv').html(res); hideL(); $('#complete').html('Done'); } function showL() { $('#loading').show(); } function hideL() { $('#loading').hide(); }

Below is the HTML

 <table cellspacing="1" cellpadding="1" border="1"> <tr><td> <input type="button" value="ckick" id="btn" onClick="ws();"> <input type="button" value="clear" onClick="$('#dv,#complete').html('');"> </td><td> <div id="dv"></div> </td></tr><tr> <td>Here<div id="loading" style="display:none" >Loading.................</div></td> <td>final<div id="complete"></div></td></tr> </table>

After the above js I tried

  • ajaxStart and ajaxStop
  • $. Ajaxsetup
  • $. Ajax ({...}). Did (hideL)

All the js codes I tried work in Firefox, but none of them work in IE and Chrome. In Firefox, the code works as expected. The loading div is shown, ajax is called, the loading div is hidden. This is exactly what I expect. In IE and Chrome, the loading of the div is not displayed. Maybe it will be shown and hidden very quickly after or before calling ajax.

Please let me know what can be done to make the code work in IE and Chrome.

There must be some workaround since I saw other sites showing loading div. Or maybe I'm doing something stupid.

As soon as the code works in all browsers. I want to create a generic function (e.g. jQuery plugin) to show a loading div when ajax is called.

+4
source share
6 answers

try the following: This ensures that the DIV ur is hidden after the ajax call ends

  function ws() { showL(); var res =""; $.ajax({ url: 'webservice.asp?service=LoadingTestSRV', async: true, cache: false, success: function(data) { res=data; $('#dv').html(res); hideL(); $('#complete').html('Done'); } }); } function showL() { $('#loading').show(); } function hideL() { $('#loading').hide(); }​
+4
source

This form worked for me earlier: (I put slow so you can see it if it's fast)

 $('#loading').ajaxStart(function() { $(this).show("slow"); }).ajaxComplete(function() { $(this).hide("slow"); });

Test example here:

http://jsfiddle.net/MarkSchultheiss/xgFkw/

+3
source

I do this if that helps.

  $.ajax({ beforeSend: function () { $('#loadingDiv').show(); $('#accordion').hide() }, complete: function () { $('#loadingDiv').hide(); $('#accordion').show(); }, type: "GET", url: data: shallowEncodedData, contentType: "application/json; charset=utf-8", dataType: "json", success: function (
+1
source

There is a problem in your ajax call. Remove async:false from the ajax call and it will work even in IE8 / 9 and Chrome. For other lost souls, make the above changes and try again.

+1
source

just add async = true to the ajax function. He will work in chrome

+1
source

My workaround for this problem in Chrome, use a timeout to call AJAX in one millisecond.

eg.

 $("#mySpinningLoader").show(); var t = setTimeout(function () { $.ajax({ url: rootPath + controllerNAction, async: false, type: "POST", data: JSON.stringify(lightweightObject), dataType: "json", contentType: "application/json; charset=utf-8", success: function (data, textStatus, jqXHR) { $("#mySpinningLoader").hide(); } }); }, 1);
0
source

More articles:


All Articles