jQuery的Ajax和qtip动态内容 [英] Jquery ajax and qtip dynamic content

问题描述

我有一个jquery ajax调用，我需要得到的结果成qtip。 我的Ajax调用（以一把umbraco基地）

 的jQuery（div.videoCardBack）。鼠标悬停（功能（E）{
        VAR getFormUrl =/基/弹出/ GetSessionPopup /+ this.id;
        $阿贾克斯（网址：{url：getFormUrl，成功：功能（数据）{
        变种结果=的eval（（+数据+））;
        $（＃考）HTML（＆LT; D​​IV CLASS = \+结果[0] .SessionVideoImageUrl +\ style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\">&nbsp;</div>" +导致[0] .SessionTitle +''+导致[0] .Session code +''+导致[0] .SessionDateTime +导致[0] .SessionAbstract）;
        变种O = {左：e.pageX  -  180，最高：e.pageY  -  80};
        $（＃考）显示（2000）.offset（O）。
        }
        }）;
        }）;

该qtip
$（'＃verttabpanel一个[REL]'）。每个（函数（）
   {
      $（本）.qtip（
      {
         内容： {
            文本：＆LT;中心＆GT;＆LT; IMG类=活动指示器SRC =/图片/ animatednuts40.gifALT =正在加载.../＆GT;＆LT; /中心＆GT;'，
            网址：$（本）.attr（'相对'），
            标题： {
               文本：TechReadyTV2  - '+ $（本）.attr（ALT），
            }
         }，
         位置： {
            角： {
               目标：bottomMiddle，
               提示：topMiddle
            }，
            调整： {
               屏幕：真
            }
         }，
         显示： {
       延迟：900，
            当：鼠标悬停，
            独奏：真
         }，
         隐藏：的mouseout，
         样式： {
            提示：真正的，
            边界： {
               宽度：0，
               半径：4
            }，
            名称：'黑暗'，
            宽度：570
         }
      }）
   }）;

}）;
 

解决方案

根据您要来填充你的数据，你可以做其qtip实例如下：

 的jQuery（div.videoCardBack）。鼠标悬停（功能（E）{
        VAR getFormUrl =/基/弹出/ GetSessionPopup /+ this.id;
        $阿贾克斯（网址：{url：getFormUrl，
                 成功：功能（数据）{
                     变种结果=的eval（（+数据+））;
                     $（＃考）HTML（＆LT; D​​IV CLASS = \+结果[0] .SessionVideoImageUrl +\ style=\"width:125px;height:83px;background:url(\'xxxx.png\');margin:8px;\">&nbsp;</div>" +导致[0] .SessionTitle +''+导致[0] .Session code +''+导致[0] .SessionDateTime +导致[0] .SessionAbstract）;
                      变种O = {左：e.pageX  -  180，最高：e.pageY  -  80};
                      $（＃考）显示（2000）.offset（O）。

                      VAR qtipAPI = $（'＃verttabpanel一个[REL]'）qtip（API）。
                      qtipAPI.updateContent（$（＃考）HTML（））;
                  }
              }）;
          }）;
 

VAR qtipAPI = $（'＃verttabpanel一个[REL]'）qtip（API）; 将抢参考qtip的情况下，你的API最初其绑定到。一旦你有一个API的参考，你可以调用 updateContent 函数来更新与任何内容，您想要的qtip的主体。

I have a jquery ajax call and I need to get the results into a qtip. My Ajax call (to 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
         }
      })
   });

});

解决方案

Depending on which instance of the qtip you want to populate with your data you can do the following:

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"); will grab a reference to qtip api of the instance you initially bound it to. Once you have an api reference you can call the updateContent function to update the main body of the qtip with whatever content you want.

这篇关于jQuery的Ajax和qtip动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！