Question

现在我有一个包含几个项目的表格，每个项目都有一个编辑图标。单击编辑图标时，项目的相应数据库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，这不是问题所在。

process.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），所以对此的任何建议也将非常感激。谢谢！

Answer 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();
})

Answer 2

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

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

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

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

2 个答案: