jQuery qTip2中的Rails动态内容 [英] Rails dynamic content in jQuery qTip2

问题描述

我让jQuery qTip2正常工作，但我还有最后一件事要解决:使动态内容显示为工具提示中的链接. (这是我的新手，请多多包涵.)

I got my jQuery qTip2 working but I have one last thing to solve: getting dynamic content to display as a link in the tooltip. (I'm new to all this so please bear with me.)

下面是我要显示的qTip的内容:

Here's what I have now to get the qTip to show:

$(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文件中添加链接:

What I want to do though is display a link as the qTip that shows the author's name and links to their profile. I know I can add a link in my application.js file like so:

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

但是，如何才能使内容从数据库中动态添加?理想情况下，我想要类似的东西:

However, how can I make it so the content adds dynamically from my database? Ideally I'd want something like:

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

我从先前的回答中知道，生成有效的HTML存在问题.但是我希望有人可以在这里帮助我.

I know from a previous answer that there is an issue with producing valid HTML. However I'm hoping someone can help me out here.

推荐答案

您可以完成此操作的一种方法是对服务器进行ajax调用，以获取要根据内容显示在工具提示中的动态HTML.您可以使用onRender的api方法来完成此操作:

One way you can accomplish this is to do an ajax call to the server to get the dynamic HTML you want to display in the tooltip depending on the content. You can use the api method of onRender to accomplish this:

$(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中执行相同的操作:

You can do the same thing in qtip2 by using the ajax method:

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

Take a look at the ajax link to see the other ways to get data from the sever, but the example above will work if you are getting back basic HTML.

这篇关于jQuery qTip2中的Rails动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！