Question

我有一个菜单，菜单中的每个链接都打开了一个模态对话框。我试图避免每次点击链接多次创建相同的对话框。

我试过检查

if(outputHolder.hasClass('ui-dialog-content:visible')){return false;} 
 $("body").append(outputHolder);
 outputHolder.load($this.attr("href"), null, function() {      
 outputHolder.dialog(

否则会显示对话框..

有什么建议吗？

完整代码

http://jsfiddle.net/6qgTr/5/

Answer 1

您希望它只在第一次显示对话框时才进行ajax调用，但是在后续点击时，会重新显示该对话框而不重新编写ajax调用，对吗？

如果是这种情况，我认为您首先必须删除以下代码，因为它会在关闭时删除对话框的元素。没有它，元素将保留，但隐藏。

close: function(event, ui) { $(this).remove(); }

您还需要跟踪对话框div元素，以便重新使用它们。您可以使用.data()方法。

function openDialog($dialogDiv) {
    $dialogDiv.dialog({
        // options, but not including 'close'
   });
}

function loadEmployeesShow(link) {
    var $link = $(link),
        $dialogDiv = $link.data('dialogDiv');
    if (!$dialogDiv) {
        console.log('creating new dialog');
        $dialogDiv = $('<div>');
        $link.data('dialogDiv', $dialogDiv);
        $dialogDiv.load($link.attr('href'), function() { openDialog($dialogDiv); });    
    } else {
        console.log('reusing existing dialog');
        openDialog($dialogDiv);
    }
};

jsfiddle

Answer 2

首先应该在html代码中创建一个div，它将用作对话框的基础，而不是动态创建它。然后，您可以打开和关闭同一个对话框，而不是每次都创建一个新对话框。

还要将所有JavaScript代码与HTML分开。

在对话框设置中，您拥有的第一个选项是bgiframe: true，这不是对话框的有效选项。

您无法使用https://www.google.com.ar

中的数据加载对话框

引用jQuery ajax page

由于浏览器安全限制，大多数“Ajax”请求都遵循相同的原始策略;请求无法从其他域，子域或协议成功检索数据。

您必须指向自己服务器上的脚本，该脚本可以执行您需要的任何检索。

I created a new fiddle with what I think you want.

每次单击链接时，请避免打开相同的对话框

2 个答案: