重新打开加载的jQuery div对话框

我有一个按钮，单击时将一个外部页面（同一个域）加载到div中，并将该div显示为一个jQuery UI对话框。重新打开加载的jQuery div对话框

<div id="Dialog_box"></div> 

<script type="text/javascript"> 
    $(function() { 
     $("#Dialog_box").dialog({ 
      autoOpen: false, 
      modal: true, 
      width: 500, 
      height: 400, 
      title: "Dialog", 
      close: function(event, ui) { 
       $("#Dialog_box").html(""); // Ensure the page is no longer loaded 
      } 
     }); 
    }); 

    function openDialog() { 
     $(document).ready(function() { 
      $("#Dialog_box").load("dialog.php").dialog('open'); 
     }); 
    } 
</script> 

<button onclick="openDialog();">Open Dialog</button>

第一次单击按钮时，它打开罚款。关闭它后，它不会再回来。

首先，我证实，它实际上是在命中“X”

$("#Dialog_box").dialog({ 
    ... 
    close: function(event, ui) { 
     alert("Closed"); 
    } 
});

被关闭，并正在显示的警报。然后，我用我的正常代码尝试，但在页面

$("#Dialog_box").dialog('open');

没有加载在这一点上，该对话框会启闭正常，没有任何问题。虽然我不认为它应该的问题，我甚至试图分离出负载和对话再次命令

function openDialog() { 
     $(document).ready(function() { 
      $("#Dialog_box").load("dialog.php"); 
      $("#Dialog_box").dialog('open'); 
     }); 
    }

，该框将显示第一次，但之后就不会再出现。

我的外部文件基本上是这样的

<link type="text/css" href="path/to/style.css" rel="stylesheet" /> 
<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jquery-ui.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Submit_button").click(function() { 
     // Do stuff with form data 
     // POST data without changing page 
    }); 
}); 
</script> 

<form action=''> 
    // Input fields 
    <input type="button" id="Submit_button" /> 
</form>

只是为了澄清，出现问题我是否张贴我的形式。

为什么加载（以及我的理解，卸载）页面后，对话框不会重新打开？

来源

2011-06-02 Mike C

删除行以从外部文件中嵌入jquery.js。这行代码会再次加载jQuery，覆盖现有的jQuery，这会破坏已经实例化的对话框对象，因为它被注册在被覆盖的jQuery实例中。为了说明：您不需要再次嵌入jquery和jqueryui，因为如果使用$ .load（），返回的片段将是请求文档（它们已经存在）的DOM的一部分。

来源

2011-06-02 23:31:00

太棒了！这工作完美。我假设对话框像iframe一样，必须被视为基本上独立的实体。谢谢你清理那个。 – 2011-06-06 12:49:58

$(function() { 
     $("#btnCallCompany").button().click(function() { 
      $("#divOpenConversation").dialog({ 
       autoOpen: true, 
       height: 500, 
       width: 650, 
       modal: true 
       }); 

      $.get("/Conversation.aspx",function(data){ 
       $("#divOpenConversation").html(data); 
      }); 
     }); 
    });//end func

来源

2012-03-29 13:38:33 ariel

重新打开加载的jQuery div对话框

回答

相关问题