Jquery Dialog , showing animated gif when ajax fetching

Question

I'm loading a dialog box using an ajax call. I'd like to add an animated gif to the dialog while the ajax fetch is running, and have it go away when the fetch is complete.

My main functions which set and open dialog are as follows

    function showDetail(sipId) {
    ShowWOrderRows(sipId);
    $("#Container").data('title.dialog', 'Details of Order ' + sipId); 
    $("#Container").dialog("open");
    return false;
    }
$(function () {    
            $("#Container").dialog({
                autoOpen: false,
                modal: true,
                height: 300,
                width: 650
            });    
        });

and on ShowWOrderRows function I am fetching data with $.ajax({ //some options });

and filling that data to $('#Container').

What's the simplest way to do this?

Thanks in advance.

possible duplicate of [jQuery "Please Wait, Loading..." animation?](http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation) — trejder, Dec 10 '14 at 10:36

Jack Murdoch · Answer 1 · 2011-07-08T09:42:52.360

2

You could attach the ajaxStart and ajaxStop events to the div containing the loading image.

$('#loadingDiv')
    .hide() //hide the image initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

edited Jul 08 '11 at 09:42

answered Jul 08 '11 at 09:33

Jack Murdoch

2,864
1
18
27

documentation says that ajaxStart and stop should only be attached to `document` since version 1.8 – JP Hellemons Oct 11 '13 at 09:44

score 1 · Accepted Answer · answered Jul 08 '11 at 09:36

1

$('<img src="your gif" />').appendTo("#Container");

$.ajax({
  url: .....
  context: .....
  success: function(data){
    $("#Container").find('img').remove();
  }
});

answered Jul 08 '11 at 09:36

thecodeparadox

86,271
21
138
164

@Adam Right The only thing you'll want to watch out for when doing this, is that there might be a slight delay before the loading image appears, as its only being downloaded at the same time its needed. – Jack Murdoch Jul 08 '11 at 09:56
Old bump; I find that replacing my submit button with this is fairly intuitive from the end users' point of view. – Stachu Jan 02 '14 at 13:04

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

On the event that fires off the Ajax request, that's where you show the div with your loading gif, then in the data success callback function of your Ajax call, you the hide the loading div. Good links here:

How can I create a "Please Wait, Loading..." animation using jQuery?

edited May 23 '17 at 12:04

Community

1
1

answered Jul 08 '11 at 09:34

ElonU Webdev

2,451
14
15

Jquery Dialog , showing animated gif when ajax fetching

3 Answers3