CODEWITHSUNDEEP
javascriptajaxjquery
Mohit Pandey
Mohit Pandey

Reputation: 3813

Loading gif image is not showing in IE and chrome

I am using JQuery ajax call for sending synchronized call to server and want to display a loading image for that time.

But loading image is visible in Firefox but not in IE and chrome. When i debug, i found that in IE, when we call java script, it stop showing changes in browser as it halts DOM and when the call is completed, it then shows all the changes. Since i shows the loading image on ajax call and remove it after completing the call, the IE doe not display any image.

But when i use alert box,it shows the loading image in IE as it stop the thread until we response to it.

Is there any method to stop java script execution for a millisecond such that IE execution halts and loading image is shown.

I already tried ajaxSend, ajaxComplete, ajaxStart, ajaxStop of JQuery and timer event of java script, but does not get any solution.

Any help is precious, thanks in advance.

Upvotes: 15

Views: 11551

Answers (10)

Oleg Sapishchuk
Oleg Sapishchuk

Reputation: 657

In your $.ajax call you need to add async: true. Following code works for me:

$.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});

Upvotes: 0

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

I used Sergiu Dumitriu's information as base. I set my async to true and added 

  beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

And it worked for me. Basically i created my own async:false attribute.

Upvotes: 0

Kamal Pundir
Kamal Pundir

Reputation: 277

Hi try to modify ajax call like this its works for me

    xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);

Upvotes: 0

Davide Ungari
Davide Ungari

Reputation: 1960

You can try to execute the ajax synchronous call in the image load callback.

Something like:

var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

Then append img to DOM.

Upvotes: 1

Rohit
Rohit

Reputation: 356

I have had similar situation to deal with, if you have to make the synchronous call, browser will suspend the DOM manipulation. So unless absolutely necessary, keep with the async calls.

There is a workaround for manipulating the DOM and show an element before starting the ajax call. Use jQuery animate(), and make the ajax call in the callback for animation complete. Following code works for me:

//show the loading animation div
$('#loading').show();

//call dummy animate on element, call ajax on finish handler
$('#loading').animate({
    opacity: 1
  }, 500, function() {
        //call ajax here
        var dataString = getDataString() + p + '&al=1';
        $.ajax(
        {
            type: 'GET',
            async: false,
            url: 'uldateList.php',
            data: dataString,
            dataType: 'json',
            success: function(result){
                //Do something with result
                ...
                //hide loading animation
                $('#loading').hide();
            }
        });
  });

Upvotes: 1

Anshuman Jasrotia
Anshuman Jasrotia

Reputation: 3175

I had a similar problem and then I sorted it out by using the Update Panel in ASP.NET. If you are using PHP or any other technology then you have to use ajax call. If you do synchronized call then the Loading image will not be shown.

Upvotes: 1

Sergiu Dumitriu
Sergiu Dumitriu

Reputation: 11601

In the context of XHR, synchronously means just that the browser freezes until the request is complete. If what you want is to make sure only one request is running at a given time, then use your own flag to indicate that a request is in progress.

By definition, the synchronous flag of a request means that any other activity must stop. I'm surprised that it even works in Firefox, last time I tried that it didn't work, but that was a long time ago. So forget about it, there's no way to make it work in all browsers. Even if you delay the request using a setTimeout, at best you'll get a frozen browser with a non-animated gif. And users don't like when you freeze their browser, especially if the request might take more than a fraction of a second.

Don't ever depend on the browser for security or correct functionality related features. If your application might get broken if a client does two requests in parallel, then you have a bug on the server side. There's nothing that prevents a malicious user from making parallel requests using other tools than the normal UI.

Upvotes: 10

Kamal Pundir
Kamal Pundir

Reputation: 277

I also faced similar problem while working with ajax like i applied some styles to UI during ajax call but these are not applied to UI and same as you told that if we put some alert it will work as expected until OK is not clicked for alert

I can't guess why it happening but you can use JQuery to show or Hide that Loading.... div Hope it will work....

Upvotes: 1

SchizoDuckie
SchizoDuckie

Reputation: 9401

You problem is probably the 'synchronized' part in your opening post.

Open the connection asynchronously. That stops the browser from locking up, and it will work as you expect. (set async = true on your XmlHttpRequest / activex object)

Upvotes: 4

rahul
rahul

Reputation: 7663

try to shows the loading image at the start of your ajax jquery call and hide it on success event

or

you can use set time out also

Upvotes: 1

Related Questions