1

チェックボックスをクリックするとクエリを更新する以下のjqueryコードがあります。すべてがうまく機能します。唯一の問題は、ロードしたページにページネーションがあり、次またはページネーションリンクの1つをクリックすると、ページが更新されて失われることです探す。ページをリロードせずにページ内のリンクを開く方法があるかどうか疑問に思っていました。そうでない場合、データのページネーションを行うための最良の方法は何ですか。ありがとう

ここに私のjqueryコードがあります:

$(document).ready(function () {
    $(".remember_cb").click(function () {
        var action = $("#criteria").attr('action');
        var form_data = $('#criteria').serialize();
        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            beforeSend: function () {
                $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
            },
            success: function (data) {
                $("#loading").fadeIn('fast');
                $('#exercise_list').html(data).fadeIn('slow');
                $("#loading").fadeOut('slow');
            }
        });
    });
    return false;
});

他のコードを含める必要がある場合は、お知らせください。どんな助けでも大歓迎です。

4

1 に答える 1

0

通常のリンクをクリックすると、その にある URL へのナビゲーションがトリガーされますhref。ナビゲーション動作を防止する必要がありますが、検索結果に次のページのデータを再入力する JS を引き続きトリガーします。clickボタンのイベント ハンドラーで両方を実行できます。

var page = 1; //the page number we're currently on

$('a.nextPage').click(function(e) {
    e.preventDefault(); //stops navigation to the URL in the link

    var input = $('#criteria input[name="page"]'); 
    if (!input.length) {
       input = $('<input>', {type:'hidden', name:'page'}).appendTo("#criteria");
    }

    input.val(++page);

    var action = $("#criteria").attr('action');
    var form_data = $("#criteria").serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        beforeSend: function () {
            $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
        },
        success: function (data) {
            $('#exercise_list').html(data).fadeIn('slow');
            $("#loading").fadeOut('slow');
        }
    });
});

このコードは単なる例ですが、うまくいけばアイデアが得られます。successまた、関数から次の行を削除します。

$("#loading").fadeIn('fast');

ローディング インジケータが既に表示されているため、奇妙な視覚効果が生じる可能性があります。また、細かいことですが、<center>タグはしばらく非推奨になっています。中央揃えの div を使用するだけです。

于 2013-05-17T16:42:26.913 に答える