display jquery dialog till data is loaded

I have 2 div one to load data from an ajax request and another to display Jquery dialog with gif image which says loading.

The jquery dialog is displayed when the page is requested while the ajax function gets the data from the controller. I want to close the dialog when the ajax function completes the request but not sure hot to do it.

here is the code

Page

<style>
.ui-dialog-titlebar-close{
    display: none;
}
</style>
<script type="text/javascript">

    $(document).ready(function() {

        //define config object
        var dialogOpts = {
            title:"Retreving Donation Details",
            modal: true,
            autoOpen: true,
            height: 200,
            width: 250,
            closeOnEscape: false,
            resizable: false,

        };
        $("#ajaxload").dialog(dialogOpts);    //end dialog

        $("#ajaxload").dialog("open");  

    });



</script>
//jquery dialog
<div id = "ajaxload" style ="display:none; background-color:Green; text-align:center;">
 <br /> 
   <img alt="loader" src = "../../Content/loader.gif" id = "loader" height="100" width        ="100" style = "margin:auto; text-align:center; vertical-align:middle;" />
</div> 

//Div开发者_如何学Go to load data
<div id="dataload"><div>

Thanks in advance

You can close it when the ajax requests stop using the ajaxStop event, like this:

$(document).ajaxStop(function() {
  $("#ajaxload").dialog("close");
});

When all concurrent jQuery AJAX requests finish, this event fires, and you can hide the dialog then. Another (same effect) format is to bind the event directly, like this:

$("#ajaxload").ajaxStop(function() {
  $(this).dialog("close");
});