Jquery ajax和qtip动态内容

Question

我有一个jquery ajax调用，我需要得到的结果到qtip。我的Ajax调用(umbraco base)

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;">&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);      
                      var qtipAPI = $('#verttabpanel a[rel]').qtip("api");
                      qtipAPI.updateContent($("#test").html());
                  }
              });
          });

var qtipAPI = $('#verttabpanel a[rel]').qtip("api");将获取对最初绑定它的实例的qtip api的引用。一旦你有了一个api引用，你可以调用updateContent函数来更新qtip的主体与任何你想要的内容。