jQuery Ajax infobulle

Question

J'essaie de faire infobulle Ajax via ce plugin jQuery: http://jquery.bassistance.de/tooltip/demo/

J'ai quelque chose comme ceci:

<p id="foottip"> 
    <span href="/last_votes/6">footnote</span>. 
</p> 

<script type="text/javascript"> 
    $(function() { 
    $("#foottip span").tooltip({ 
     bodyHandler: function() { 
     //dj ajax here and cache 
     var tip = '' 
     var url = $(this).attr("href"); 

     $.ajax({ 
      url:url, success:function(html){tip = html;}, async:false 
     }); 

     return tip 
     }, 

     showURL: false 
    }); 
    }) 
</script> 

je le fais avec une requête asynchrone Ajax, mais la solution a un problème, parfois il redirige la page. Cela semble être un bug. Comment puis-je faire une info-bulle Ajax avec une requête asynchrone? Je n'arrive pas à trouver le moyen de transmettre le résultat à l'info-bulle de manière asynchrone.

Answer 1

Oui, votre code ne fonctionnera pas de manière asynchrone:

var tip = '' 
var url = $(this).attr("href"); 
$.ajax({ 
    url:url, success:function(html){tip = html;}, async:true 
}); 

// -- The problem here is that your bodyHandler function will return 
// -- immediately, before the AJAX callback is called. 
return tip 

Pour résoudre ce problème, vous pouvez avoir à mettre votre code infobulle de rendu dans le rappel success de votre demande $.ajax.

Answer 2

J'ai fait face au même problème. Découvert une technique intelligente here qui crée dynamiquement un élément dans le callback bodyHandler, puis met à jour dans l'appel AJAX pour obtenir l'effet désiré.

Appliqué au problème ci-dessus:

$("#foottip span").tooltip({ 
    bodyHandler: function() { 
     var url = $(this).attr("href"); 
     var tip = $("<span/>").html("loading tip..."); 

     $.ajax({ 
      url: url, 
      success: function(html){ tip.html(html); } 
     }); 

     return tip; 
    }, 
    showURL: false 
});