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.

Answer 1

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

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