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。您可以使用 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);
              });
           }
        }
    });
});

编辑：

您可以在 qtip2 中使用 ajax 方法：

$(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 就可以了。