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，上述示例将可用。