我有一个包含长分页内容的页面。现在,为了访问一个项目,我想加载页面,直到找到所需的项目。问题是我的“while”循环总是进入无限循环。经过一些研究,我发现由于ajax的异步行为,它永远找不到元素。这是我正在使用的代码
加载内容的循环,直到找不到元素:
$(document).ready(function(){
if(document.getElementById('selectedItem')) {
totalPages = $("#selectedItem").attr("totalPages");
trgtElementUrl = $("#selectedItem").val();
var targetElement = $("#" + trgtElementUrl);
i = 2;
//getting $('#'+trgtElementUrl).length always 0
while(!($('#'+trgtElementUrl).length)) {
$('#page' + i).trigger("click");
i++;
}
target_top = $('#'+trgtElementUrl).offset().top;
target_top = target_top - 10;
$('html, body').animate({scrollTop:target_top}, 500);
$(".summaries li").removeClass();
$('#'+trgtElementUrl).addClass('active');
}
});
通过触发点击事件调用ajax
$('a.loadMore').live("click",function(event){
$(this).hide();
$(".loaderImage").show();
event.preventDefault();
var link = $(this).attr("href");
$.ajax({
url: link,
dataType: "html",
success: function(data) {
if($('a.loadMore').parent().parent().hasClass('advertisingGrid')){
var items = $(data).find('ul.advertisingGridItems').html();
$(items).hide().appendTo('ul.advertisingGridItems').show('normal');
} else {
var items = $(data).filter('ul.summaries').html();
var subnav = $(data).filter('nav.subnav');
var itemLinks = $(subnav).find('ul').html();
$('div#pagination').remove();
$(items).appendTo('ul.summaries');
$(itemLinks).appendTo('.subnav ul');
}
$(".loaderImage").hide();
}
});
return false;
});
这对于同步ajax调用始终可以正常工作。是否可以在没有同步ajax调用的情况下使其工作。感谢
答案 0 :(得分:1)
而不是请求单个页面更改您的AJAX请求,以包括您要搜索的项目的名称/ ID和当前页码。
让服务器端代码对当前页面和目标页面(包含目标项目的页面)之间的页面/项目列表做出响应。
收到回复后,根据客户要求为收到的页面设置动画(与您现在这样做的方式相同)。
这里的区别在于您正在发出一个异步请求,并且您收到了所需的所有数据。从那里开始,您可以使用CSS和JS以任何方式制作动画。
此方法的另一个好处是,您可以正确处理连接错误,请求异常以及在找不到目标项时可能导致的其他异常。