alors que l'élément n'a pas été trouvé load ajax

Question

J'ai une page qui contient un long contenu paginé. Maintenant, pour accéder à un seul élément, je veux charger les pages jusqu'à ce que j'ai trouvé l'élément désiré. Le problème est que mes boucles "while" sont toujours passées en boucle infinie. Après quelques recherches, j'ai trouvé qu'en raison du comportement asynchrone d'ajax il ne trouve jamais d'élément. voici le code, je travaille avec

While pour le contenu de chargement jusqu'à ce que l'élément non trouvé:

$(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'); 
    } 

}); 

et appel ajax en déclenchant événement click

$('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; 
}); 

Cela fonctionne toujours bien avec appel ajax synchrone. Est-il possible de le faire fonctionner sans appel ajax synchrone. Merci

Answer 1

Au lieu de demander des pages individuelles, modifiez votre requête AJAX pour inclure le nom/ID de l'élément que vous recherchez et le numéro de page en cours. Avoir le code côté serveur répondre à cela avec une liste de pages/éléments entre votre page actuelle et la page cible (la page contenant l'élément cible).

Une fois la réponse reçue, animez les pages reçues selon la demande du client (de la même manière que vous le faites maintenant). La différence ici est que vous faites une requête asynchrone et que vous recevez toutes les données dont vous avez besoin. À partir de là, vous pouvez animer comme vous le souhaitez en utilisant CSS et JS.

Un autre avantage de cette approche est que vous pouvez gérer correctement les erreurs de connexion, demander des exceptions et d'autres exceptions qui pourraient résulter lorsque l'élément cible est introuvable.