Intereting Posts
как связать данные с динамически именованных входов внутри ng-repeat jQuery ajaxForm, возвращающий файл .json jquery получить предыдущий текст ввода Код jQuery не будет подключаться к форме поиска Как создать фон для модального кликабеля? Как удалить бесплатную собственную горизонтальную полосу прокрутки jqgrid, если используется autowidth: true Как обновить страницу для всех зарегистрированных пользователей (совместное редактирование) с помощью JavaScript, jQuery и HTML? Проверка jQuery для нескольких полей, как использовать другое событие для запуска проверки в каждом разделе Изменение значения OG: IMAGE с помощью jQuery click Динамические переключатели переменных в JQuery jQuery UI tooltip html со ссылками Бесплатная кнопка добавления jgGrid на пейджер Regex для австралийской проверки номера телефона Переключение между границами изображения и удаление границ других существующих изображений Чтение / запись файлов на стороне сервера ~ Доска комментариев (JQuery)

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

Я получил 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:

 
  • <span title=""> , 
  • HTML-рендеринг:

     
  • Testing, 
  • То, что я хочу сделать, это показать ссылку как qTip, которая показывает имя автора и ссылки на их профиль. Я знаю, что могу добавить ссылку в свой файл application.js следующим образом:

      **content: { text: 'My name'},** 

    Однако как я могу это сделать, чтобы контент динамически добавлялся из моей базы данных? В идеале я хотел бы что-то вроде:

      **content: { text: '<a href="https://stackoverflow.com/questions/7548956/rails-dynamic-content-in-jquery-qtip2/``">``'},** 

    Я знаю из предыдущего ответа, что есть проблема с выпуском корректного HTML. Однако я надеюсь, что кто-то может помочь мне здесь.

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

    РЕДАКТИРОВАТЬ:

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