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

在jQuery qTip2中使用Rails动态内容

1 个答案: