jQuery的Ajax和qtip動態內容

我有一個jquery ajax調用，我需要得到的結果爲qtip。我的Ajax調用（到一把umbraco基地）jQuery的Ajax和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);  
     } 
     }); 
     }); 

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 
     } 
     }) 
    }); 

});

來源

2011-07-29 nerdperson

請解釋升技有關上下文 –

我回到所謂的「會話」的對象 - 它持有約的時間，地點數據，和像我們的Web應用程序「sessionvideourl」視頻詳細信息。這是通過jquery ajax調用一個類似於asp.net pagemethod的umbraco基本頁面獲得的。 – nerdperson

取決於你想與您的數據填充其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的主體。

來源

2011-08-08 17:46:48 amurra

這是我對我所做的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');

希望這可以幫助有人讀這個問題！

來源

2012-01-23 14:33:10 pnm123

jQuery的Ajax和qtip動態內容

回答

相關問題