0

私はプロジェクトを構築していて、初めて Ajax を使用しています。現在、データのテーブルがあり、Ajax を使用して、ページをリロードせずにテーブルからレコードを追加および削除しました。次のステップは、データが追加または削除されたときに、テーブル内のデータを更新することです。

私のAjaxコードには、次のものがあります。

$(document).ready(function(){

$('form#TesttableIndexForm').submit(function(event){
    event.preventDefault();

    $.ajax({
        url:'/testing/save_ajax_data',
        type:'POST',
        data: $("form#TesttableIndexForm").serialize(),
        success: function(data) {
            $("#testtable").replaceWith(data);
        },

    });     
});

$('a.deleteajax').click(function(event){
    event.preventDefault();

    var answer = confirm("Delete this record?")
    if (answer){
        $.ajax({
            url:'/testing/delete_ajax_data/',
            type:'GET',
            data: $(this).attr("href"),
            success: function(data) {
                $("#testtable").replaceWith(data);
            },
        });
    }

    return false;  
});

});

テーブルの ID は です#testtable。データが追加または削除されたときにテーブルが更新されるように、コード$("#testtable").replaceWith(data);の一部を追加しました。success

ただし、その Ajax コードを使用してデータを削除および追加することはできますが、いずれかのイベントが発生すると、テーブルは消えます。ページを手動でリロードすると、修正されたデータでテーブルが再表示されます。

私は CakePHP を使用しており、テーブルのデータはデータベースから生成されます。これは私に問題を引き起こしますか?

前もって感謝します！

4

1 に答える 1

0

問題が何であるかを理解しました。

私の Ajax ファイルにvar loadUrl = "/test-area/table/";、HTML テーブルをロードするコントローラーへの URL を追加しました。次に、基本的にデータベースを再度クエリするために、コントローラー内に関数を作成する必要がありました。

function testtable() {
    $this->layout = 'ajax';
    $this->loadModel('Testtable');

    $testing = $this->Testtable->find('all');
    $this->set('testing', $testing);
}

これをいじって気づいたのは、指定しない$this->layout = 'ajax';とデフォルトのレイアウトでページが読み込まれるということです。これにより、ページが完全に壊れます。そこで、 という完全に空のレイアウト ファイルを作成しましたajax。

次に、ajax コードで、次のものを削除しました。

$("#testtable").replaceWith(data);

と：

$("#testtable").load(loadUrl + "#testtable");

これらすべてを組み合わせて、レコードが追加または削除されると、テーブルは問題なく再ロードされます。

于 2012-04-13T09:40:56.537 に答える