Диалоговое окно jQuery - отображать загружаемое изображение и загружать содержимое перед открытием

Я использую модальное диалоговое окно jquery для отображения таблицы данных из моего частичного представления. В частичном представлении у меня есть сценарии, которые я использовал для преобразования своих HTML-таблиц в jquery DataTables. Поэтому мне нужно убедиться, что таблица правильно отформатирована, прежде чем она будет отображаться в диалоговом окне. Итак, я использую функцию обратного вызова .load(), чтобы открыть диалоговое окно (Вопрос: это правильный/правильный способ?):

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

Однако загрузка происходит с задержкой, и пользователь ничего не увидит, пока диалоговое окно не будет готово и открыто. Это не удобно для пользователя, поэтому я хочу отображать загрузочное изображение во время загрузки диалогового окна. Я пытался добавить изображение во время инициализации диалога, но оно не работает:

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

Любая идея, как я могу убедиться, что мой диалог отображает правильную таблицу, в то же время информируя пользователя о загрузке изображения до того, как диалог будет готов ??

Спасибо..


dialog jquery asp.net-mvc-3
person shennyL    schedule 26.07.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что понял это, просто поделившись своим способом сделать это здесь:

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');
        });
person shennyL    schedule 11.10.2011

arrow_upward
0
arrow_downward

HTML:

<div id="agentListDia">
    <span id="loading"> Loading .... </span>
</div>

JQuery:

$("#agentListDia").dialog({
    autoOpen: false,
    height: "auto",
    width: "auto",
    modal: true,
    draggable: false
});

$("#agentListDia").load(URL,function(){
    $("#loading").hide();
    $("#agentListDia").dialog("open");
});
// where URL is the page to be loaded into div
person Taksh    schedule 14.07.2014