display jquery dialog till data is loaded.

Question

Hi,

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 to load data
<div id="dataload"><div>

Thanks in advance

Answer 1

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");
});