Rails динамический контент в jQuery qTip2 - PullRequest
Новая
       1

Rails динамический контент в jQuery qTip2

0 голосов
/ 26 сентября 2011

Я получил свой 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.Однако я надеюсь, что кто-то может помочь мне здесь.

1 Ответ

2 голосов
/ 27 сентября 2011

Один из способов сделать это - выполнить 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);
              });
           }
        }
    });
});

EDIT:

Вы можете сделать то же самое в 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.

...