JQuery自動ページ更新のリフレッシュ

Question

jqueryでページネーションのシステムを作成しましたが、スクリプトは非常にうまく動作しますが、ページを変更すると、スクリプトにより、リフレッシュのため元のページに戻りました。

ページ分割を使ってリフレッシュするにはどうすればいいですか？

はあなたのコメントに追加の詳細について

$(document).ready(function() { 
    setInterval(function(){ 
    $("#results").load("recherche.php"); 
    $("#results").on("click", ".pagination a", function (e){ 
     e.preventDefault(); 
     $(".loading-div").show(); 
     var page = $(this).attr("data-page"); 
     $("#results").load("recherche.php",{"page":page}, function(){ 
      $(".loading-div").hide(); 

      }); 

     }); 

    }, 1000); 
}); 

<div id="results"> 
<div class="loading-div"> 
<img src="img/loader.gif"> 
</div> 
</div> 

Answer 1

感謝感謝します。私はあなたの問題は "setInterval"と信じています... を一度ロードするだけで、このコードを実行したければ、ajax呼び出しが引き継ぎます。

この場合、setTimeoutを使用する必要があります。setIntervalは1000ミリ秒ごとにコールバックを繰り返します。あなたがあなたのページ秒ごとにリフレッシュしたいので、もし、COMMENT

上のすべての権利をベースの更新

$(document).ready(function() { 
    setTimeout(function(){ 
     $("#results").load("recherche.php"); 
     $("#results").on("click", ".pagination a", function (e){ 
      e.preventDefault(); 
      $(".loading-div").show(); 
      var page = $(this).attr("data-page"); 
      $("#results").load("recherche.php",{"page":page}, function(){ 
       $(".loading-div").hide(); 

      }); 
     }); 
    }, 1000); 
}); 

<div id="results"> 
    <div class="loading-div"> 
     <img src="img/loader.gif"> 
    </div> 
</div> 

（この場合は）、（それは非常にしばしばです！）あなたは覚えておく必要があります。現在のページが表示されます。そのため、今後のコールでは常に正しいページがロードされます。変数を使って現在のページの値を保持し、デフォルト値を「ページ1」にしてください。

$(document).ready(function() { 
    var currentPage = 1; 
    var loadPage = function(page) { 
     $(".loading-div").show(); 

     page = page || currentPage; // if no page parameter provided, simply reload the currentPage 

     $("#results").load("recherche.php",{"page":page}, function(){ 
      currentPage = page; // once the page is loaded, update our currentPage value since this is the page we are now looking at 

      $(".loading-div").hide(); 
     }); 
    }; 

    // Move this out of the interval - you probably don't want to set-up a click handler every time your interval is called! 
    $("#results").on("click", ".pagination a", function (e){ 
     e.preventDefault(); 
     loadPage($(this).attr("data-page")); 
    }); 

    setInterval(function(){ 
     loadPage(); // every 1 second, reload the current page 
    }, 1000); 

    loadPage(1); // initial loading of the first page 
}); 

<div class="loading-div"> 
    <img src="img/loader.gif"> 
</div> 
<div id="results"> 
</div> 

一つ注意すべき最後の事：あなたがあなたのコンテンツをロード非常に最初の時間、それは「結果」のdivの内容よりも優先されます - あなたのloader.gif含むを...私はあなたの結果のdivの外ローダーを移動しました新しいページをリクエストするたびに再利用することができます...

希望すると助かります！