AJAX的jQuery qTip插件問題

我在將qTip插件與AJAX調用應用於PHP時遇到了一些問題。我過去完成了JSON調用。我遇到了問題，而不是PHP方面。這是基礎知識。我有幾百個具有rel屬性的鏈接（錨點）。每個rel屬性都包含對PHP代碼的AJAX調用的URL，該代碼將返回HTML或JSON（無論是否有效）。AJAX的jQuery qTip插件問題

http://craigsworks.com/projects/qtip2/

鏈接的CodeIgniter代碼如下所示（HTTPS）：

<a rel="https://domain/cataloguers/ajax_detail/144969" class="title_dialog title_color" href="#">A Strange and Wonderful Prophet ... May 30th 1803. A.L. 5803... [A Manuscript...</a>

的Javascript是我的問題是。

$(document).ready(function() 
{ 
    $('a.title_dialog[rel]').click().qtip({ 
     content: { 
      text: 'Loading...', 
      ajax: { 
       url: $(this).attr('rel'), 
       type: 'GET', 
       data: {}, 
       dataType: 'json', 
       success: function(data) { 
        // Set the content manually (required!) 
        console.log(data); 
        this.set('content.text', 'Successful!'); 
       } 
      }, 
      title: { 
       text: 'Catalogue Item Details:', 
       button: false 
      } 
     } 
    }) 
});

我可以得到相對URL和使用的console.log傾倒出來，但我似乎無法得到任何形式的AJAX成功輸出（數據）。我確信我可以通過PHP代碼生成HTML或JSON;它已經過測試。我需要某種.each（）或回調函數方法來解決這個問題嗎？

工作液：

/* 
* ToolTip - qTip v2 
* For Title Details 
*/ 
$(document).ready(function() { 
    $('a.title_dialog[rel]').each(function() { 
     var ajaxUrl=$(this).attr('rel'); 
     $(this).qtip({ 
      content: { 
       text: $(this).attr('rel'), 
       ajax: { 
        url: ajaxUrl, 
        type: 'GET', 
        data: {}, 
        dataType: 'json', 
        success: function(result) { 
         this.set('content.text', result.content); 
        } 
       }, 
       title: { 
        text: 'Catalogue Item Details:', 
        button: true 
       } 
      }, 
      position: { 
       at: 'bottom center', 
       my: 'top center', 
       viewport: $(window), 
       effect: false 
      }, 
      show: { 
       event: 'click', 
       solo: true 
      }, 
      hide: 'unfocus', 
      style: { 
       classes: 'qtip-light qtip-shadow' 
      } 
     }) 
    }) 

    // Make sure it doesn't follow the link when we click it 
    .click(function(event) { 
     event.preventDefault(); 
    }); 
});

來源

2013-02-06 jjwdesign

遍歷元素並初始化插件，這樣你就可以把每一個作爲個體的實例。在插件this內可能無法訪問，而在each循環中則是無法訪問。所以你創建所需要的數據的變量，該變量傳遞到插件

$('a.title_dialog[rel]').each(function(){ 
    var ajaxUrl=$(this).attr('rel'); 
    $(this).qtip({ 
     content: { 
      text: 'Loading...', 
      ajax: { 
       url:ajaxUrl, 
      .......... 

    }) 
})

你想看看options/show設置點擊作爲事件開尖

來源

2013-02-06 04:15:25 charlietfl

AJAX的jQuery qTip插件問題

回答

相關問題