基于动态生成信息的 jQuery UI 对话框答案

【问题标题】：jQuery UI dialogs based on dynamically generated information基于动态生成信息的 jQuery UI 对话框
【发布时间】：2012-08-03 02:59:54
【问题描述】：

现在我有一个包含几个项目的表格，每个项目都有一个编辑图标。单击编辑图标时，项目的相应数据库 ID（其名称）通过 $.get() AJAX 方法发送到 process.php，它会生成一个包含该数据库项目的一些属性的 JQuery UI 对话框。

我单击的第一个项目会弹出正确的对话框，其中所有属性都填充在文本框中。但是，当我单击不同的项目时，会出现相同的对话框，其中包含第一个项目的信息。我单击的任何其他项在对话框中仍然具有第一项的信息。

我猜正在发生的事情是发送回 index.php、新 div 和 jquery 对话框调用的数据已经被回显并附加到页面 - 因此我首先得到相同盒子一遍又一遍。我只是不知道如何解决它。

index.php 部分：

        $('#edit_link').live('click', function(e){
            var ID = $(this).attr('name');
            console.log(ID);
            $.get('process.php', {taskID: ID}, function(data){
                $('body').append(data);
            });
            e.preventDefault();
        })

...控制台成功记录了每个项目的 taskID，所以这不是问题。

进程.php：

if(isset($_GET['taskID'])){
    $taskID = $_GET['taskID'];
    $task = TaskDB::getTask($taskID);
    $duration = $task->getDuration();
    $description = $task->getDescription();
    $deadline = $task->getDeadline();
    echo '<script>$("#dialog").dialog({
                    height: 150,
                    width: 300,
                    modal: true,
                    buttons: {
                        "Save Task": function() {
                            $( this ).dialog( "close" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });</script><div id="dialog" title="Edit Task" style="display:none;">
        <p>Deadline: <input type="text" style="margin-right:10px;" value="'.$deadline.'"/> Duration (hours): <input type="text" style="width:20px;" value="'.$duration.'"/></p>
        <p>Description: <input type="text" style="width: 200px;" value="'.$description.'"/></p>
    </div>';

}

回显部分是我认为问题所在，因为如果单击另一个编辑，则不会清除先前回显的数据。

任何帮助将不胜感激。此外，我不完全确定我所做的是否是实现这一目标的最佳方式（让 PHP 生成如此多的 html/javascript），因此任何有关此的建议也将不胜感激。谢谢！

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

我认为您应该首先从正文中删除上一个对话框。试试这个：

$('#edit_link').live('click', function(e){
    var ID = $(this).attr('name');
    console.log(ID);
    $("#dialog").remove(); // Delete the previous dialog
    $.get('process.php', {taskID: ID}, function(data){
        $('body').append(data);
    });
    e.preventDefault();
})

【讨论】：

这成功了，在我试图清空 div 之前......甚至没有想过要删除对话框。非常感谢！

【解决方案2】：

听起来你必须在关闭对话框时使用 .destroy() 函数。此功能将重置您的对话框

$('.dialog').dialog({ 
    // your options

    close : function() { 
        $('.dialog').dialog("destroy"); 
    } 
});

【讨论】：