基於動態生成信息的jQuery UI對話框

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"); 
    } 
});