javascript - jQuery Ajax tooltip - Stack Overflow

I try to do Ajax tooltip via this jQuery plugin: I have some thing like this:<p id="foottip&qu

I try to do Ajax tooltip via this jQuery plugin: /

I have some thing like this:

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

I do it with an asynchronous Ajax request, but the solution has a problem, sometimes it redirects the page. It seems to be a bug. How can I do an Ajax tooltip with an asynchronous request? I can't find way to pass result to the tooltip asynchronously.

I try to do Ajax tooltip via this jQuery plugin: http://jquery.bassistance.de/tooltip/demo/

I have some thing like this:

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

I do it with an asynchronous Ajax request, but the solution has a problem, sometimes it redirects the page. It seems to be a bug. How can I do an Ajax tooltip with an asynchronous request? I can't find way to pass result to the tooltip asynchronously.

Share Improve this question edited Aug 7, 2010 at 17:09 Daniel Vassallo 345k72 gold badges512 silver badges446 bronze badges asked Aug 7, 2010 at 16:56 EvgEvg 3,0905 gold badges48 silver badges62 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

I butted up against the same problem. Discovered a clever technique here that dynamically creates an element in the bodyHandler callback and then updates that in the AJAX call to neatly achieve the desired effect.

As applied to the problem above:

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

Yes, your code will not work in an asynchronous manner:

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

To solve this problem, you may have to put your tooltip rendering code inside the success callback of your $.ajax request.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745218866a4617152.html

相关推荐

  • javascript - jQuery Ajax tooltip - Stack Overflow

    I try to do Ajax tooltip via this jQuery plugin: I have some thing like this:<p id="foottip&qu

    3小时前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信