Question

I am using a jquery modal dialog to display a table of data from my partial view. In the partial view, I have scripts which I used to change my HTML tables into jquery DataTables. So I need to make sure the table is well-formatted before it is displayed in the dialog. So, I use the callback function of .load() to open the dialog (Question: Is this a correct/proper way?):

$detaildialog.load(url, function () {
            $detaildialog.dialog('open');
        });

However, there is a delay for the loading and user will not see anything until the dialog is ready and open. This is not user-friendly and so I wish to display an loading image while the dialog is loading. I had tried to append the image during initialization of the dialog, but it doesnt work:

var $detaildialog;
    var loadingPic = $('<img src="../../Content/Images/loading.png"');
    $detaildialog = $('<div></div>').append(loadingPic.clone()).dialog({
        autoOpen: false,
        title: 'Food Details',
        modal: true
    });

Any idea how can I ensure my dialog display the correct table while keep user informed with a loading image before the dialog is ready??

Thanks..

Answer 1

I think i had figure it out, just sharing my way of doing it here:

HTML:

 <div id="loading">  
   Please Wait ...<br />
   <img src="../../Content/Add_in_Images/loading.gif" alt="Processing" />
  </div>

jQuery:

 $('#loading').hide();
 // Once clicked, show loading image first
 $('#loading').show();
 $detaildialog.load(url, function () {
            $('#loading').hide();
            $detaildialog.dialog('open');
        });