在对话框中加载另一个页面答案

【问题标题】：Load another page in the dialog在对话框中加载另一个页面
【发布时间】：2009-04-17 17:44:34
【问题描述】：

单击链接时，我能够显示一个对话框。如何在对话框中拉取另一个页面的内容？

【问题讨论】：

【解决方案1】：

我过去通过将“其他内容”加载到 div 中然后将该 div 显示为对话框来完成此操作。

$('#dialog').load('other_content.html', function(){ 
    $(this).dialog();
}

Ajax/load 的 jQuery 文档

【讨论】：

谢谢，但我宁愿不预加载其他内容，这很可能会延迟页面加载时间。
乔恩 - 我给你 +1 是因为你的回答是正确的，而 OP 的回应让我发笑！

【解决方案2】：

你要找的是 jQuery load() 方法吗？

【讨论】：

我不知道如何在对话框窗口上获得引用，以使其在不关闭和重新打开的情况下加载不同的内容。
尝试类似 $('#theDialog').load('someOtherFile.html');然后，当您单击链接时，它将具有远程文件的内容。有多种加载文件的方法，但这是最直接的。

【解决方案3】：

当您通过 jquery 的即加载方法调用文件时，则有可能当文件被拖放到窗口对话框中时，从加载的文件中加载更多内容：

<script>
$(document).ready(function(){
  $("#myDropZone").load("another-file.html");
});
</script>

此代码必须从加载的 html 内容中返回。

BTM，您可以通过不同方式加载内容，但请注意您在做什么。不要递归加载文件。将与循环相同。

希望对你有帮助

【讨论】：

上述函数应该驻留在原始页面或对话框的html中吗？我不明白哪个页面响应对话框内的事件，是对话框本身，还是调用它的页面？
对不起，如果我没有写清楚。我的意思是页面，它是由您的第一个请求（不是对话框）调用的。

【解决方案4】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var UIDialogId = 0;

            $('.UIDialogOpen').live('click', function (e) {
                e.preventDefault();
                alert(this.href);
                UIDialogId++;

                $('<div/>', {
                    'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId,
                    'class': 'UIDialog'
                }).appendTo('body').dialog({
                    title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message',
                    position: ['center', 'center'],
                    modal: true, resizable: false, zIndex: 10000, autoOpen: true,
                    minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px',
                    minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px',
                    maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px',
                    maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px',
                    close: function (event, ui) {
                        $(this).remove();
                    }
                })
                .load(this.href);

                //Or   //Use .load(this.href); and comment or delete below append line.

                //.append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />');


                $('.UIDialogClose, .UIDialogCancel').live('click', function (e) {
                    var obj = $(this)
                    e.preventDefault();
                    obj.parents('.UIDialog').dialog('close');
                });
            });

        });
    </script>
</head>
<body>
    <a href="your url" title="test1" class="UIDialogOpen">test1</a>
    <br />
    <a href="your url" title="test2" class="UIDialogOpen">test2</a>
    <br />
    <a href="your url" title="test3" class="UIDialogOpen">test3 </a>
</body>
</html>

【讨论】：

in test1 in href 你需要把你的 url 链接放在那里。然后它会工作。