Question

现在，我正在使用此函数从jquery ui对话框中的其他页面加载内容：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.load(uri, function() {
        div.dialog({
            title: title,
            width: width,
            height: height,
            position: 'middle',
            resizable: false,
            buttons: buttonsArray
        });
    });
}

例如：

$('a.dictionary').click(function() {
    openDialogByUri($otherDialogContainer, '/test.php', 'Dialog title', 600, 400, 
        {
            'Close': function() {
                $otherDialogContainer.dialog('close');
            }
        }
    );
    return false;
});

问题是，可能需要一些时间才能加载外部页面中的内容。在此之前，对话框不会出现，看起来用户没有任何事情发生。

如何修改该功能以便像这样工作：

当用户点击调用上述功能的链接时，该对话框立即打开。在对话框内部有一些加载栏或类似的图像，表明正在加载contetn。加载内容后，将其插入对话框中。

Answer 1

嗯，这似乎有效：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.html("<div style=\"height: "+(height-80)+
             "px; background: url('/images/ajax-loader.gif') center center no-repeat;\"></div>");
    div.dialog({
        title: title,
        width: width,
        height: height,
        position: 'middle',
        resizable: false,
        buttons: buttonsArray
    });
    $.ajax({
        url: uri,
        success: function(response) {
            div.html(response);
        },
        error: function(response) {
            alert(response);
        }
    });
}

Answer 2

            function showUrlInDialog(url) {
            var id = '<%= ResolveUrl("~/connecting.gif")%>';
            var tag = $("<div><div id='img' align='center'><img src='" + id + "' /></div></div>");
            tag.dialog({ show: 'fade', hide: 'fade', modal: false, closeOnEscape: false, draggable: false, autoOpen: false,
                resizable: false, close: function (event, ui) {
                    $(this).dialog('destroy');
                    $(this).dialog('close');
                    $(this).remove();
                }
            }).dialog('open');
            $.ajax({
                url: url,
                success: function (data) {
                    tag.append(data);
                    $("#img").hide();
                },
                error: function (data) {
                    $("#img").hide();
                }
            });
        }

如何在jquery ui对话框中显示加载栏？

2 个答案: