私は次のようなスクロールステップで製品を取得するためのコードを作成しようとしています 1 ] 製品を検索 2 ] 1 つの div で結果を取得 3 ] 結果 div のスクロールで次の製品が必要
しかし、すべての検索ヒットとスクロール製品で何が起こっているのか一度に多くのajaxリクエストを呼び出す必要があります。
私のjQueryコードは
jQuery("#product_search_filter").submit(function () {
jQuery(".load_more_result").remove();
jQuery.ajax({
url: ajaxurl,
type: "post",
data: jQuery(this).serialize(),
dataType: "json",
success: function (products) {
var load_more = 0;
jQuery(".right_bar_sub_inner").html("");
jQuery.each(products, function (i, data) {
if (this.image) {
jQuery(".right_bar_sub_inner").append('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
}
});
jQuery(".right_bar_sub_inner").append("<div class='load_more_result'>Load More...</div>");
var start = false;
jQuery(".right_bar_sub").scroll( function(){
var _data = jQuery("#product_search_filter").serialize();
_data += "&offset=" + load_more;
jQuery(".load_more_result").css('opacity','0.1');
jQuery.ajax({
url: ajaxurl,
type: "post",
data: _data,
dataType: "json",
success: function (products) {
jQuery.each(products, function (i, data) {
if (this.image) {
jQuery(".load_more_result").before('<div class="product_show" alt="' + i + '"> <img class="right_bar_img size-auto" src="' + this.image + '" title="'+ this.title +'"> </div>');
}
});
jQuery(".load_more_result").css('opacity','1');
start = false;
}
});
return false;
});
}
});
return false;
});
その問題は Lamp-databaseで確認できます
もう一度検索してみると、firebug のコンソールで確認できます。最初は、スクロールで 1 つのリクエストだけが呼び出されていることがわかります。もう一度検索すると、2 つのリクエストが呼び出されています。
等々...