2

jQueryを使用してajaxページネーションを作成しようとしています。私はそれを機能させていますが、大きな問題があります：

ページネーションは<<-First<-PreviousPage1 Page2 Next-> Last->>で構成され、各ボタンが機能します。pagenumはajaxを介して送信され、そのページ番号に関連する投稿を表示する際にページが配置されているDIVを再読み込みします（ページ1 =投稿1〜10など）。

合計2ページのページ1にいると仮定します。2ページ目、[次へ]、または[最後]をクリックすると、2ページ目に移動します。次に、ページ1、前または最後をクリックすると、必要に応じてページ1に移動しますが、ajaxが2回起動されます。

次に、もう一度[ページ2]、[次へ]、または[最後]をクリックすると、2ページ目に移動しますが、ajaxが4回起動されます。1ページ目に戻ると、ajaxが8回起動されます。

あなたは私がこれでどこに行くのかを見ることができます。

私は3つのファイルのコードを含めています：

コンテンツが内部に表示されるindex.php

<script type="text/javascript" src="fetchposts.js"></script>
<div id="contPaginated">
    <div id="content"></div>
</div>

getposts.phpをロードするfetchposts.js（私のコンテンツをワードプレスのものから分離します）

$(document).ready(function() {
     $('#content').load('getposts.php');
});

投稿とページネーションをロードするgetposts.php（これは問題が発生している場所であり、問​​題が発生している場所であるため、ページネーションコードのみが含まれています）

<script type="text/javascript">
$(document).ready(function() {
var first = 1;
var currentPage = 1;
var numrows = <?php echo $rows; ?>;
var pagerows = <?php echo $page_rows; ?>;
var last = <?php echo $last; ?>;
var pagenum = '';
var hideLikes = <?php echo $hideLikes; ?>;
var hideDislikes = <?php echo $hideDislikes; ?>;

for (i = 1; i <= last; i++){
    $('<div id="page_' + i + '" class="pageNum"><a href="#">' + i + '</a></div>').appendTo('.pages');
}

$('.pageNum').live('click', function() {
    pagenum = $(this).attr('id').replace('page_', '');
    paginationAjax();
    return false;
});

$('.first').live('click', function() {
    pagenum = first;
    paginationAjax();
    return false;
});

$('.previous').live('click', function() {
    pagenum = Math.max(currentPage - 1, first);
    paginationAjax();
    return false;
});

$('.next').live('click', function() {
    pagenum = Math.min(currentPage + 1, last);
    paginationAjax();
    return false;
});

$('.last').live('click', function() {
    pagenum = last;
    paginationAjax();
    return false;
});

function paginationAjax(){
    // Send values to database
    $.ajax({
        url: 'getposts.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'GET',
        data: 'pagenum=' + pagenum,
        success: function(callback) {
            $('#content').html('').html(callback);
        }
    });
}
});
</script>

<div class="Pagination">
<div class ="Pagination-inside-top">
    <div class="first">
        <a href=''> <<-First </a>
    </div>

    <div class="previous">  
        <a href=''> <-Previous</a>
    </div>

    <div class="pages"></div>

    <div class="next">
        <a href=''>Next -> </a>
    </div>

    <div class="last">
        <a href=''>Last ->></a>
    </div>
</div>
</div>

私はいくつかのことを明確にしたいと思います：

  • コードをクリーンアップする必要があることは承知しています。このループを最初に修正したいだけです。
  • ajax自体は機能します。適切な値を送信し、それらを適切に取得します。
  • 変数はすべて宣言し、同様にうまく設定します。

繰り返しになりますが、問題は、ajaxが正常に機能し、適切な場所に移動する一方で、ページネーションを使用した回数に基づいて指数関数的に起動することです。1クリックでajaxが1回起動しますが、2クリックで2回起動し、3クリックで起動します。 4回、4クリック=8など。

したがって、問題は次のとおりです。指数ループを停止するにはどうすればよいですか？

4

2 に答える 2

1

live()私が見る限り、あなたが原因です...

Back＆Forwardに一意のIDを割り当て、スクリプトのphp部分に現在のページを設定します（jsonヘッダーを渡してからjson_encode（）を渡すと仮定すると$array_of_vals_for_json['back_button']=$thispage-1;、前のページのリンクのようになります。

適切な提案を行うには、PHPが何をしているのかを確認する必要があると思いますが、ループの原因はあなたのライブであると確信しています。

于 2012-01-08T21:01:59.983 に答える
0

複数回ロードgetposts.phpしているため、ロードするたびにライブイベントがバインドされますgetposts.php。

ページの読み込み時に、fetchposts.jsgetposts.phpはライブクリックイベントを読み込んでバインドします。次に、リンクをクリックすると、リンクが再度読み込まgetposts.phpれ、ライブクリックイベントが再度バインドされます。とループします。

jsコードをfetchposts.jsに移動すると、問題がないはずです。

于 2012-01-08T20:59:32.280 に答える