2013-07-18 111 views
0

我有一個包含長分頁內容的頁面。現在訪問一個單一的項目,我想加載頁面,直到我找到所需的項目。問題是我的「while」循環總是進入無限循環。經過一番研究,我發現,由於ajax的異步行爲,它永遠不會找到元素。這裏是我與雖然未找到元素加載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; 
}); 

這始終工作

$(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調用罰款與同步ajax呼叫。是否有可能在沒有同步Ajax調用的情況下工作?謝謝

+0

此調用的同步性是什麼? –

+0

*這對於同步ajax調用總是可以正常工作。是否有可能使其工作沒有同步Ajax調用*? - > ** ajax **代表**異步** JavaScript和XML – intuitivepixel

+0

不,因爲您將同時發送數千個Ajax請求。 –

回答

1

而不是請求個別頁面更改您的AJAX請求,以包括您正在搜索的項目的名稱/ ID和當前頁碼。

讓服務器端代碼用當前頁面和目標頁面(包含目標項目的頁面)之間的頁面/項目列表對此進行響應。

一旦收到響應,根據客戶端請求(與您現在使用的方式相同)爲接收到的頁面設置動畫。

這裏的區別在於您正在發出一個異步請求並收到您需要的所有數據。從那裏開始,您可以使用CSS和JS以任何方式製作動畫。

此方法的另一個好處是,您可以正確處理連接錯誤,請求異常以及未找到目標項時可能導致的其他異常。

+0

Thanks @ Ma3x非常感謝:) – openbees