jQuery中的Rails動態內容qTip2

Question

我得到了我的jQuery qTip2的工作，但我還有最後一件事要解決：獲取動態內容以顯示爲工具提示中的鏈接。 （我是新來的這一切，所以請多多包涵。）

這是我現在必須得到qTip顯示：

$(document).ready(function() { 
    $('span[title]').qtip({ 
     position: { 
      my: 'bottom center', 
      at: 'top center' 
     }, 
     hide: { 
      fixed: true 
     }, 
     style: { 
      classes:'ui-tooltip-shadow ui-tooltip-rounded' 
     } 
    }); 
}); 

這是我的ERB文件：

<li class="article"><span title="<%= author.name %>"> 
    <%= article.body %>,&nbsp; 
</span></li> 

呈現的HTML：

<li class="article"><span title="My Name"> 
    Testing,&nbsp; 
</span></li> 

我想要做的是顯示一個鏈接作爲顯示作者姓名和鏈接到他們的p的qTip設定檔。我知道我可以加入我的application.js鏈接文件，如下所示：

**content: { 
     text: '<a href="link">My name</a>'},** 

但是，我怎麼能做出這麼的內容動態地從我的數據庫中增加了？理想情況下，我想要的東西是這樣的：

**content: { 
     text: '<a href="`<%= article.author.profile %>`">`<%= author.name %>`</a>'},** 

我知道從以前的答案，有生產有效的HTML問題。不過，我希望有人能幫助我。

Answer 1

您可以完成此操作的一種方法是對服務器執行ajax調用，以根據內容獲取要在工具提示中顯示的動態HTML。您可以使用onRender的api方法來實現：

$(document).ready(function() { 
    $('span[title]').qtip({ 
     position: { 
      my: 'bottom center', 
      at: 'top center' 
     }, 
     hide: { 
      fixed: true 
     }, 
     style: { 
      classes:'ui-tooltip-shadow ui-tooltip-rounded' 
     }, 
     api: { 
      onRender: function() { 
       $.post(urlToContent, function (content) { 
       // Update the tooltip with the dynamic content 
       api.updateContent(content); 
       }); 
      } 
     } 
    }); 
}); 

編輯：

您可以通過使用ajax方法做同樣的事情在qtip2：

$(document).ready(function() { 
    $('span[title]').qtip({ 
     position: { 
      my: 'bottom center', 
      at: 'top center' 
     }, 
     hide: { 
      fixed: true 
     }, 
     style: { 
      classes:'ui-tooltip-shadow ui-tooltip-rounded' 
     }, 
     content: { 
      text: 'Loading...', // The text to use whilst the AJAX request is loading 
      ajax: { 
       url: '/path/to/file', // URL to the local file 
       type: 'GET', // POST or GET 
       data: {} // Data to pass along with your request 
      } 
     }); 
    }); 

乘坐查看ajax鏈接以查看從服務器獲取數據的其他方式，但是如果您獲得基本HTML，上述示例將可用。