0

这是我第一次使用工具提示，并对其进行了大量研究。我使用 jquery 网站来获取大部分信息。我希望我的工具提示在鼠标单击超链接时显示动态数据。我在链接中添加了标题，并在下面有以下代码：

  var t = 1000;
     $(document).tooltip({
       content: '... waiting on ajax ...',
open: function(evt, ui) {
    var elem = $(this);
    $.ajax({ type: "POST",url:'/GetTooltip/', data: 80140}).always(function() {

        elem.tooltip('option', 'content', 'Ajax call complete');

     });
setTimeout(function(){
  $(ui.tooltip).hide('destroy');
   }, t);},

   position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }

});

我并不完全了解关于 always 函数的 ajax 调用语法以及如何让数据显示在我的工具提示上。GetTooltip 返回 JSON 数据，我只想发布到 GetTooltip 脚本和返回的数据以显示在我的工具提示上。目前我的 ajax 没有发布任何内容。

4

1 回答 1

0

关于您不完全了解的陈述

您可以在 stackoverflow 上找到许多其他答案。看看这个小提琴，如果你需要更多帮助，请告诉我。

更新小提琴 2

如果更新了小提琴。您可以从 ajax 回调返回的参数中传递值。这是对 ajax 调用的简单包装：

function callAjax(elem){
    $.ajax({ url: '/echo/json/',
         type: 'POST',
         contentType:"application/json; charset=utf-8",
         dataType:"json",
         data:  { json: JSON.stringify({ text: 'some text'})}
      }).always(
          function(data,textStatus, errorThrown) 
          { 
             elem.tooltip('option', 'content'
                , 'Ajax call complete. Result:' + data.text);
           });
}

我在JSON.stringify(...)上面使用来创建一个 Json-String。此功能可能并非在所有浏览器中都存在。因此，如果您遇到问题，请使用当前的 chrome / chromium 浏览器进行测试。

所以你可以在 tooltip() 中使用包装函数：

$('#tippy').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
        var elem = $(this);
        callAjax(elem);
    } // open
});

上面可以看到，always 方法调用了一个带有 3 个参数（data、textStatus、errorThrown）的匿名函数。要传递来自 ajax 调用的回复，您可以使用data. 上面我只传递了一个带有属性文本的简单对象。要访问它，您可以使用data.text

于 2013-07-13T17:57:21.730 回答