Question

我正在使用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
    });

任何想法如何确保我的对话框显示正确的表格，同时在对话框准备好之前让用户知道加载图像？

谢谢..

Answer 1

我想我已经明白了，只是分享我在这里做的方式：

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

Answer 2

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

jQuery对话框 - 在打开之前显示加载图像和加载内容

2 个答案: