在 AJAX 样式 jQuery UI 选项卡中加载的 jQuery UI 对话框窗口答案

【问题标题】：jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs在 AJAX 样式 jQuery UI 选项卡中加载的 jQuery UI 对话框窗口
【发布时间】：2009-04-30 20:56:57
【问题描述】：

AJAX 选项卡运行良好。这部分非常简单。但是，让 AJAX UI Dialog 模式窗口触发链接是不成功的。

我们将不胜感激。

【问题讨论】：

标签： jquery jquery-ui modal-dialog

【解决方案1】：

没有什么比那个人更容易的了。试试这个：

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <style>
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    </style>
</head>
<body>
    <a class="ajax" href="http://www.google.com">
      Open as dialog
    </a>

    <script type="text/javascript">
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });
    </script>
</body>
</html>

请注意，您无法从本地远程加载，因此您必须将其上传到服务器或其他任何地方。另请注意，您无法从外部域加载，因此您应该将链接的 href 替换为托管在同一域（和 here's the workaround）上的文档。

干杯

【讨论】：

@FFish 更新了答案，并附上了关于跨域 ajax 的注释。除非您可以将文件上传到google.com，否则您不能只是复制'n'粘贴源；）
好的，干杯。让它在 localhost (XAMPP) 上使用相对路径加载文件。
jquery.load 似乎没有弹出远程内容中包含的 javascript
关于嵌入的标签我从来没有遇到任何问题来执行这些标签。甚至多次出现都可以正常工作。尽管如此，调试这些脚本块确实很麻烦，例如语法错误不会在浏览器控制台中显示为 js 错误，而只是避免脚本执行。
很好奇 - 为什么“没有比这更容易”的答案（上面）不起作用？看起来合乎逻辑？ 206.251.38.181/jquery-learn/ajax/iframe.html

【解决方案2】：

为避免在多次单击链接时添加额外的divs，并避免在使用脚本显示表单时出现问题，您可以尝试使用@jek 代码的变体。

$('a.ajax').live('click', function() {
    var url = this.href;
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
        );
    //prevent the browser to follow the link
    return false;
});`

【讨论】：

确实是好点.. 如果我在原始答案中包含此调整，您介意吗？
以下页面很好地挖掘了这些问题并使用 jQuery 的 one() 函数来完成相同的功能：blog.nemikor.com/category/jquery-ui/jquery-ui-dialog 因为它使用 dialog('open') 它不需要特殊的 close() 处理.

【解决方案3】：

//格式正确

<script type="text/Javascript">
  $(function ()    
{
    $('<div>').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('mypage.html');
        },         
        height: 400,
        width: 600,
        title: 'Ajax Page'
    });
});

【讨论】：

这绝对是最好最干净的答案。
缺少一些东西；您应该“返回 false”，并且 jQuery 建议明确关闭标签 $("
")

【解决方案4】：

只是对 nicktea 答案的补充。此代码加载远程页面的内容（不重定向到那里），并在关闭它时进行清理。

<script type="text/javascript">
    function showDialog() {
        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load('AccessRightsConfig.htm');
            },
            close: function(event, ui) {
                    $(this).remove();
                },
            height: 400,
            width: 600,
            title: 'Ajax Page'
        });

        return false;
    }
</script>

【讨论】：

【解决方案5】：

前两个答案都不适合我，因为多个元素可以打开指向不同页面的对话框。

这感觉像是最干净的解决方案，只在加载时创建一次对话框对象，然后使用事件适当地打开/关闭/显示：

$(function () {
      var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
      ajaxDialog.dialog({autoOpen: false});
      $('a.ajax-dialog-opener').live('click', function() {
          // load remote content
          ajaxDialog.load(this.href);
          ajaxDialog.dialog("open");
          //prevent the browser from following the link
          return false;
      });
});

【讨论】：

您实际上可以通过使用：$('..').live('click', function(event) { event.preventDefault(); ... }); 来阻止函数中的默认操作，这样您可以省略return false; 并防止意外触发默认的click 事件。
如回应 CGK 的回答所述，您可能也对此解决方案感兴趣：blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/… 特别是对于多个对话框元素

【解决方案6】：

很好奇 - 为什么“没有比这更容易”的答案（上面）不起作用？看起来合乎逻辑？ http://206.251.38.181/jquery-learn/ajax/iframe.html

【讨论】：

【解决方案7】：

我结合了几个答案，想出了下面是在模态对话框中打开外部 url 的 JQuery 代码。

<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" integrity="sha256-PsB+5ZEsBlDx9Fi/GXc1bZmC7wEQzZK4bM/VwNm1L6c=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<body>
    <a href="https://wikipedia.com/" class="test">comment #1</a>
    <br>
    <a href="https://ebay.com/" class="test">comment #2</a>
    <br>
    <a href="https://ask.com/" class="test">comment #3</a>
    <br>
    <a class="ajax" href="https://api.github.com">Open github</a>
    <br>
    <a class="ajax" href="https://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity">Open code google</a>
    <br>
    <a class="ajax" href="https://enable-cors.org/">Open enable-cors</a>
    <br>
    <div id="somediv" title="this is a dialog" style="display:none;">
        <iframe id="thedialog" width="350" height="350"></iframe>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
        $(".test").click(function () 
        {
            var url = $(this).attr("href");
            return openDialogwithiFrame(url);
        });
        });
    </script>
    <script type="text/javascript">
        $(function (){
            $('a.ajax').click(function() {
                var url = this.href;
                return openDialogwithiFrame(url);
            });
        });
        
        function openDialogwithiFrame(url)
        {
            $("#thedialog").attr('src', url);
            $("#somediv").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
            $("#thedialog").attr('src', "about:blank");
            }
            });
            return false;
        }
        
        function openDialogwithoutiFrame(url)
        {
                // show a spinner or something via css
                var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
                // open the dialog
                dialog.dialog({
        // add a close listener to prevent adding multiple divs to the document
                    close: function(event, ui) {
                        // remove div with all data and events
                        dialog.remove();
                    },
                    modal: true
                });
                // load remote content
                dialog.load(
                    url, 
                    //{},  omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                    function (responseText, textStatus, XMLHttpRequest) {
                        // remove the loading class
                        dialog.removeClass('loading');
                    }
                );
                //prevent the browser to follow the link
                return false;
        }
    </script>
</body>
</html>

代码有两个功能。

openDialogwithiFrame(url) :- 这可以打开任何外部 url 模型对话框。但它使用 iframe。
openDialogwithoutiFrame(url):-这也会在模型对话框，但有标题 “访问控制允许来源”以更正值。我放了这样的网址在示例代码中。此设置需要在 web 上完成服务器。参考 https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5。用于在 Apache web 上设置标题“Access-Control-Allow-Origin” 以下服务器应添加到 Apache 的 .htaccess 中服务器。


    Header set Access-Control-Allow-Origin “*” //Replace domain of host sites separated by comma for *
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "content-type "
    Header always set Access-Control-Allow-Credentials "true"

【讨论】：

【解决方案8】：

<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
  Open as dialog
</a>

<div id="myDialog">
I have a dialog!
</div>

See the example I posted on jsbin.com.

【讨论】：

实际上，我不确定这是否是您要查找的内容，除非有人捡到，否则我会回来更新。你能澄清是什么导致了这个问题吗？