JQuery Ajax подсказка

Question

Я пытаюсь сделать всплывающую подсказку Ajax с помощью этого плагина jQuery: http://jquery.bassistance.de/tooltip/demo/

У меня есть такая вещь:

<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>   

Я делаю это с помощью асинхронного Ajax-запроса, но у решения есть проблема, иногда он перенаправляет страницу. Кажется, это ошибка. Как я могу сделать подсказку Ajax с асинхронным запросом? Я не могу найти способ передать результат во всплывающую подсказку асинхронно.

Answer 1

Я столкнулся с той же проблемой. Здесь обнаружен умный метод, который динамически создает элемент в обратном вызове bodyHandler, а затем обновляет его в вызове AJAX, чтобы аккуратно достичь желаемого эффекта.

Применительно к проблеме выше:

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

Answer 2

Да, ваш код не будет работать асинхронно:

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

Чтобы решить эту проблему, вам, возможно, придется поместить код рендеринга всплывающей подсказки внутри success обратный вызов вашего $.ajax запрос.