JQuery AJAX и Qtip динамический контент - PullRequest
Новая
       6

JQuery AJAX и Qtip динамический контент

1 голос
/ 30 июля 2011

У меня есть вызов 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
         }
      })
   });

});

Ответы [ 2 ]

1 голос
/ 23 января 2012

Вот что я сделал, чтобы добавить 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');

Надеюсь, это поможет кому-то, читающему этот вопрос!

0 голосов
/ 08 августа 2011

В зависимости от того, какой экземпляр 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 любым содержимым, которое вы хотите.

...