1

AJAX/JQuery でページを新しいデータベース情報で更新する方法に興味があります。

既存の質問に対する調査では、次の投稿が役立つ可能性があることが示唆されています。

データベースへのjQuery AJAX呼び出しは機能しますが、順序どおりではありません

fadeIn + replaceWithを使用したjQuery AJAX

これらの提案に従って、AJAX で送信されたデータを処理する PHP 関数を作成しました。成功したら、古い HTML をフェードアウトし、新しい HTML に置き換えます。

問題は、DOM 要素が最初にクリックされたときにデータベースからの新しいデータが表示されず、2 回目にクリックされたときに表示されることです。また、2 回目のクリックで不要なページの更新が行われます。

http://bucketlingerwedding.com/80s-music-reception/で (私の結婚式の Web サイトの) 実際の例を見ることができます。

投票しようとしても、最初は機能せず、2 回目は機能します (ページのリロードを除く)。

私が抱えているもう 1 つの懸念は、cache: を「false」に設定する必要があるのか​​、単に省略すべきなのかがわからないことです。問題の一部は、replaceWith (.html() も試しました) で読み込んでいる新しい HTML が、テーブルの各行に同じクラスと ID を持っていることです。テーブル全体ではなく単一の行を置き換えようとして、それに新しい ID とクラス名を付けた場合、JQUERY/AJAX はその新しい行をデータベースからの新しい情報でフェードインしますか?

これが私がAJAXに使用しているコードです（上記の投稿に部分的に基づいています）：

$(document).ready(function(){
//JQuery for the submission of a new list item.
    $('input.[class$="-arrow"]').click(function(e){
        e.preventDefault(); //put e in function.
        var ajaxurl = '<?php echo the_permalink(); ?>';
        if ($(this).hasClass('up-arrow')) {
            var arrowdirection = 'up';
            var entry = $(this).val();
        }
        else if ($(this).hasClass('down-arrow')) {
            var arrowdirection = 'down';
            var entry = $(this).val();
        }
        var rowid = '.line-items-rows' + '#' + entry;
        var data = {
            action: 'cb_lud_arrow_action',
            arrow: arrowdirection,
            entryID: entry
        };
        $.ajax ({
            cache: false,
            type: 'POST',
            url: ajaxurl,
            data: data,
            success: function(data){
                newtable = '<?php 
                $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
                include_once "table-up-down.php";
                echo $cb_lud_new_output;
                ?>';
                $('#cb_lud_table').fadeOut('fast', function(){
                    $(this).replaceWith(newtable).hide();
                    newtable.fadeIn('fast');
                });
                }
        });
});
});

注: AJAX で投稿されたデータが実際にデータベース テーブルを更新することを確認したので、.php ファイルと ajax POST メソッドは少なくとも正しく機能しています。

私が基本的に必要とするのは、イベントの年表が次のようになることです。

  1. ユーザーがテーブル内の行に投票 (クリック) します。
  2. データは MySQL データベースに送信され、正しい列に投票が追加されます。
  3. 成功すると、関数はデータベースから新しい値を決定し、新しい html を生成します。
  4. 古いデータはフェードアウトし、新しいデータはフェードインします。
  5. 誰もが満足しています。

これが JQuery ソリューション (エフェクトを正しい順序で配置する、または .delay() 関数を使用するなど) に近いものであるか、AJAX ソリューションに近いものであるかは、私にとっては大した問題ではありません。データの投稿の成功、またはキャッシュに関係する何か。動作させたいだけです。助けてください。

4

2 に答える 2

2

ブラウザー コンソールを使用して、スローされたエラーを確認します。newtableは単なる文字列であるため、jQuery メソッドを呼び出すための jQuery オブジェクトとして使用することはできません。これにより、コンソールにエラーがスローされ、コードを簡単にゼロにすることができます。

次の出力のソース ビューを確認します。

   newtable = '<?php 
            $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
            include_once "table-up-down.php";
            echo $cb_lud_new_output;
            ?>';

テーブルを html 文字列で完全に再構築した文字列は必要ない可能性がありますが、ページ全体も html で返されるため、完全に複製され、html バージョン自体を取得して上記を削除するだけで済みます。完全に。

への変更：

     success: function(data){
           /* convert whole page returned to jquery and get inner html of the table*/
            var newRows=$(data).find('#cb_lud_table').html() 
            $('#cb_lud_table').fadeOut('fast', function(){
                 /* insert new rows*/
                $(this).html(newRows).fadeIn('fast');

            });
            }

それが機能するようになったら、クリックハンドラーがどのようにアタッチされているかを再検討する必要があるかもしれません (私は見ていません)。古い html を削除すると、添付されているすべてのイベントも削除されます。on()恒久的な資産となるテーブルへのデリゲートを使用すると、html の変更を補うことができます。

于 2012-06-20T04:03:49.233 に答える
1

変数で fadeIn 関数を使用しました。そのため、エラー newtable.fadeIn is not a function.You can not use fadeIn function on variable がスローされます。FadeIn 関数に ID またはクラス名を指定します。

于 2012-06-20T04:03:22.117 に答える