jquery ajax和qtip动态内容

Question

我有一个 jquery ajax 调用，我需要将结果放入 qtip 中。 我的 Ajax 通话（至 umbraco 基地）

jQuery("div.videoCardBack").mouseover(function (e) {
        var getFormUrl = "/base/Popup/GetSessionPopup/" + this.id;
        $.ajax({ url: getFormUrl, success: function (data) {
        var result = eval("(" + data + ")");
        $("#test").html("<div  class=\""  + result[0].SessionVideoImageUrl + "\" style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\">&nbsp;</div>" + result[0].SessionTitle + ' ' + result[0].SessionCode + ' ' + result[0].SessionDateTime + result[0].SessionAbstract);
        var o = { left: e.pageX - 180, top: e.pageY - 80 };
        $("#test").show(2000).offset(o);      
        }
        });
        });

The qtip
$('#verttabpanel a[rel]').each(function()
   { 
      $(this).qtip(
      {
         content: {
            text: '<center><img class="throbber" src="/images/animatednuts40.gif" alt="Loading..." /></center>',
            url: $(this).attr('rel'),
            title: {
               text: 'TechReadyTV2 - ' + $(this).attr('alt'),
            }
         },
         position: {
            corner: {
               target: 'bottomMiddle',
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true
            }
         },
         show: { 
       delay: 900,
            when: 'mouseover', 
            solo: true
         },
         hide: 'mouseout',
         style: {
            tip: true,
            border: {
               width: 0,
               radius: 4
            },
            name: 'dark',
            width: 570
         }
      })
   });

});

Answer 1

以下是我为动态创建的每个新图像元素添加 qTip 所做的操作。

我已将其放在页眉上。

function call_qtip(element){
    $(element).qtip({
        content: {
            text: function(api) {
                return $(this).attr('qtip-content');
            }
        },
        position: {
            my: 'top left',
            at: 'bottom center',
            adjust: {
                y: 5
            }
        },
        style: {
            classes: 'ui-tooltip-tipsy'
        },
        show: {
            when: {
                event: 'focus'
            },
            effect: function() {
                $(this).fadeIn(500);
            }
        }
    });
}
call_qtip('.tooltipped');

现在页面中每个带有 tooltipped 类的元素都将转换为 qTip。

最后，每次创建新元素时我都会运行以下代码。

call_qtip('#file_upload_uploaded img:last');

希望这对阅读这个问题的人有所帮助！

Answer 2

根据您想要用数据填充的 qtip 实例，您可以执行以下操作：

jQuery("div.videoCardBack").mouseover(function (e) {
        var getFormUrl = "/base/Popup/GetSessionPopup/" + this.id;
        $.ajax({ url: getFormUrl, 
                 success: function (data) {
                     var result = eval("(" + data + ")");
                     $("#test").html("<div  class=\""  + result[0].SessionVideoImageUrl + "\" style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\"> </div>" + result[0].SessionTitle + ' ' + result[0].SessionCode + ' ' + result[0].SessionDateTime + result[0].SessionAbstract);
                      var o = { left: e.pageX - 180, top: e.pageY - 80 };
                      $("#test").show(2000).offset(o);      

                      var qtipAPI = $('#verttabpanel a[rel]').qtip("api");
                      qtipAPI.updateContent($("#test").html());
                  }
              });
          });

var qtipAPI = $('#verttabpanel a[rel]').qtip("api"); 将获取对您最初绑定到的实例的 qtip api 的引用。获得 api 引用后，您可以调用 updateContent 函数，用您想要的任何内容更新 qtip 的主体。