0

現在、いくつかのアイテムを含むテーブルがあり、それぞれに [編集] アイコンがあります。編集アイコンをクリックすると、アイテムの対応するデータベース 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();
        })

...コンソールは各項目のタスク ID を正常に記録するので、それは問題ではありません。

プロセス.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 を生成させる)。そのため、それに関する提案も大歓迎です。ありがとう！

4

2 に答える 2

3

最初に前のダイアログを本文から削除する必要があると思います。これを試して：

$('#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();
})
于 2012-08-06T06:11:08.157 に答える
0

ダイアログを閉じるときに .destroy() 関数を使用する必要があるようです。この関数はダイアログをリセットします

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

    close : function() { 
        $('.dialog').dialog("destroy"); 
    } 
});
于 2012-08-06T06:11:11.043 に答える