而未找到元素加载ajax

时间:2013-07-18 16:01:22

标签: jquery ajax

我有一个包含长分页内容的页面。现在,为了访问一个项目,我想加载页面,直到找到所需的项目。问题是我的“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调用的情况下使其工作。感谢

1 个答案:

答案 0 :(得分:1)

而不是请求单个页面更改您的AJAX请求,以包括您要搜索的项目的名称/ ID和当前页码。

让服务器端代码对当前页面和目标页面(包含目标项目的页面)之间的页面/项目列表做出响应。

收到回复后,根据客户要求为收到的页面设置动画(与您现在这样做的方式相同)。

这里的区别在于您正在发出一个异步请求,并且您收到了所需的所有数据。从那里开始,您可以使用CSS和JS以任何方式制作动画。

此方法的另一个好处是,您可以正确处理连接错误,请求异常以及在找不到目标项时可能导致的其他异常。