jquery - jQuery qTip2 中的 Rails 动态内容

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>

不过，我想做的是显示一个链接作为 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。您可以使用 的api方法onRender来完成此操作：

$(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，则上面的示例将起作用。