jquery 对话框中的 ajax 内容（帖子）在第二次加载对话框时未加载答案

【问题标题】：ajax content (post) in a jquery dialog not loading on the second loading of the dialogjquery 对话框中的 ajax 内容（帖子）在第二次加载对话框时未加载
【发布时间】：2012-07-09 19:29:31
【问题描述】：

我有一个页面，通过单击按钮加载对话框：

function editShowSchedule(emId){
    $(".ui-dialog-content").dialog("close");            
    var url = "inc/ajax/schedule-editShowSchedule.php?emId="+emId+"&stationId="+<?php echo $stationId;?>;   
    var container = '<div id="somediv" title="Modifier l\'horaire d\'une émission"></div>';
    $(container).load(url).dialog({
       //modal:false,
       height: 600,
       width: 600,
       resizable: false,
       buttons: { "Annuler": function() { $(this).dialog("close"); },
               "Sauvegarder": function(){ saveShowSchedule();} }
    });
}

然后，在该对话框中，我在下拉框中触发 .change() 以加载与所选元素相关的信息。

<?php 
$emId = $_POST['emId'];
$stationId = $_POST['stationId'];
?>

[...]

$(document).ready(function() {  
$("#selectShow").unbind('change');
$("#selectShow").change(function(){
    $("#showTimelines").html('En chargement');
    var emId = $("#selectShow").val();
    var stationId = <?php echo $stationId;?>;
    var params = {emId:emId,
                  stationId:stationId}
    $.post('inc/ajax/schedule-getAllTimelinesByEmId.php',params, function(data){ 
            alert('getTimelineByEmId');
            $("#showTimelines").html(data);             
            $(".button, button, input:submit, input:button").button();  
            enableAddRecurrenceInPeriod();
            enableRecurrenceCloseBox();
        },"html"  
    ); 
})<?php if($emId > 0){?>.change()<?php }?>;
});

第一次，它工作正常。

但是，如果我关闭对话框并单击以再次打开它，则警报实际上有效，但我看不到 $("#showTimelines").html 中没有出现任何内容（甚至没有加载消息：$(" #showTimelines").html('En chargement');)，尽管我确实在 Firefox 中看到了它，而且我只是在加载文档后才发帖...

有人知道为什么和/或如何解决这个问题吗？

【问题讨论】：

标签： jquery ajax dialog

【解决方案1】：

如果您拆分这两个步骤，它应该可以工作：创建一次对话框（例如，在文档准备就绪时），然后单击按钮调用“打开”（您仍然可以正常更新对话框的内部 html )。

来自jquery ui docs：

对 $(foo).dialog() 的调用将初始化一个对话框实例，并默认自动打开对话框。如果您想重复使用对话框，最简单的方法是禁用“自动打开”选项：

$(foo).dialog({ autoOpen: false }) 并打开它 $(foo).dialog('open')。要关闭它，请使用 $(foo).dialog('关闭')

【讨论】：

所以问题出在我实际上关闭它的事实上？这是否意味着我必须覆盖 X 上的关闭才能隐藏它？因为在我的情况下，我打开对话框，加载内容，关闭对话框。重新打开一个新的（？）对话框，加载内容（但我看不到它，尽管它是在 firebug 中获取的）。就像你说的那样，我应该打开一个对话框，更新它，隐藏它，更新并再次显示它，......然后关闭它？
问题似乎是您正在初始化一个已经初始化的对话框。在你第一次调用 .dialog() （初始化组件）之后，你可以调用 .dialog('open') 或 .dialog('close') 来改变它的可见性。

【解决方案2】：

啊，我明白了。感谢 Felipe 带领我走上正确的道路：我将我的 jquery 更改为：

function editShowSchedule(emId){
$(".ui-dialog-content").dialog("destroy");  
$("#somediv").remove();     
var url = "inc/ajax/schedule-editShowSchedule.php?emId="+emId+"&stationId="+<?php echo $stationId;?>;   
var container = '<div id="somediv" title="Modifier l\'horaire d\'une émission"></div>';
$(container).load(url).dialog({
    //modal:false,
    height: 600,
    width: 600,
    resizable: false,
    close: function(event, ui){
        $(this).dialog("destroy");
        $("#somediv").remove();
    },
    buttons: { "Annuler": function() { $(this).dialog("destroy"); 
                                       $("#somediv").remove(); },
               "Sauvegarder": function(){ saveShowSchedule();} }
});

}

基本上，关闭实际上只是隐藏了对话框。现在使用 destroy 会删除它，但它会将容器留在原处，虽然是隐藏的（因此更新了那个容器，而不是用我的 ajax 创建的新对话框），所以我通过调用 $("#somediv").remove( );

现在，一切正常！

【讨论】：