jQuery UI的对话框功能

问题描述：

我加载外部PHP页面到一个jQuery用户界面对话框通过公开事件，像这样：jQuery UI的对话框功能

$.ajax({ 
    url: "page.php", 
    success: function(data){ 
     $("#loadDiv").dialog({ 
      open: function(){ 
       $(this).html(data); 
      }, 
      autoOpen: false, 
      resizable: false, 
      minWidth:900, 
      minHeight:480, 
      modal:true, 
      title: "Add Page", 
      buttons: { 
       "Add": function() { 
        $.post("script.php", $("#addPageForm").serialize() , 
        function(data){ 
         if(data.search("<b>Error</b>") != -1 || data.search("<strong>Error</strong>") != -1) { 
          // Error occured 
         }else{ 
          // Success 
         } 
        }); 
       }, 
       "Cancel": function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 
});

（#loadDiv仅仅是隐藏在网页上的空div）

问题是，当你点击取消按钮时，它应该关闭对话框 - 但它没有。我使用FireBug for FF，它告诉我错误“$（this）.dialog不是一个函数... $（this）.dialog（”close“）;”。当我尝试用$（“＃loadDiv”）重新打开它时，dialog（“open”）也不起作用，我认为这两个是相关的问题。

问题是，对话框的内容是通过ajax动态加载的，因为如果我取出ajax部分，它会起作用。我需要弄清楚如何让它与我现在加载内容的方式一起工作。

任何建议，将不胜感激！谢谢！

答

想通了，我把对话框中的页面包含在jQuery源代码中，所以我删除了那一行，它一切正常。

答

在ajax调用之外声明你的对话框，将autoOpen设置为false。现在在成功回调中，您可以将数据附加到空白div，然后只显示它。事情是这样的：

$(function() { 
    $("#loadDiv").dialog({    
      autoOpen: false, 
      resizable: false, 
      minWidth:900, 
      minHeight:480, 
      modal:true, 
      title: "Add Page", 
      buttons: { 
       "Add": function() { 
        $.post("script.php", $("#addPageForm").serialize() , 
        function(data){ 
         if(data.search("<b>Error</b>") != -1 || data.search("<strong>Error</strong>") != -1) { 
          // Error occured 
         }else{ 
          // Success 
         } 
        }); 
       }, 
       "Cancel": function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 

}); 

$.ajax({ 
    url: "page.php", 
    success: function(data){ 
     $('#loadDiv').html(data); 
     $('#loadDiv').dialog('open'); 
    } 

});

编辑修改和验证与JSLint的代码。

我这样做，我仍然有对话框功能无法正常工作的问题。我有一个点击事件，触发$（“＃loadDiv”）。dialog（“open”）;它不工作 - 萤火虫只是告诉我，这不是一个功能。当我把ajax拿走时，它一切正常 – Key 2011-02-03 18:04:00

答

请检查文档加载完成后是否存在加载对话框的问题，请尝试在点击事件中使用live，并检查$(this)是否仍然引用对话框。

您可以在代码早期分配一个变量来保存对$(this)的引用，以便您知道当引用$(this)时，您将引用正确的对象/元素。

jQuery UI的对话框功能

相关推荐