Использование qTip2 с Ruby on Rails

Question

Я нашел эту замечательную подсказку под названием qTip2. Я люблю это до сих пор, но у меня возникли проблемы с его использованием.

Я смог установить и запустить qTip2 с моей установкой Rails 3.1. Однако я сталкиваюсь с проблемой, когда использую функциональность ajax в qTip2.

ajax-запрос qTip2 требует, чтобы ссылка на скрипт выполнялась перед его отображением в div содержимого всплывающей подсказки (который автоматически генерируется qTip2). Вы можете посмотреть код, на который я ссылаюсь здесь.

http://www.craigsworks.com/projects/qtip2/demos/

Проблема в том, что он не очень хорошо сочетается с RoR. Запрос ajax, объявленный с использованием RoR, является более явным, и я могу явно указать rails, какой div id я хотел бы обновить.

Учитывая следующие обстоятельства, мне нужно было сделать следующие вещи:

1. содержание всплывающей подсказки должно быть динамическим
2. Мне нужно было использовать функциональность ajax qTip2, чтобы я мог создать собственный макет для содержимого всплывающей подсказки.

Я попробовал следующее, хотя:

1. Поместите фрагмент HTML для загрузки в div содержимого в общей папке. Контент загружен в правильном формате, но у меня не может быть динамического контента. Файлы html.erb не работают в этой папке. Есть ли альтернатива этой папке, которая будет работать, но с динамическим контентом?

2. Пытался использовать qTip2 ajax-запрос с RoR, но безуспешно. Я попытался явно определить идентификатор обновления ajax в файле ответов.js (через контроллер, представления и т. Д.). Но выяснить точный идентификатор, сгенерированный плагином qTip2, было для меня слишком сложно.

вот что у меня есть

HTML

 <a id="editor1" href="/deals_details.html.erb">

Javascript

$(document).ready(function()
{

   $('#editor1').each(function()
   {
      $(this).qtip(
      {
         content: {
            text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
            ajax: {
               /*once: false*/
               url: $(this).attr('href') 

            }, 
            title: {
               text: 'qTip2 Test', 
               button: true
            }
         },
         position: {
            at: 'center', 
            my: 'center',
            viewport: $(window), 
         },
         show: {
            event: 'click',
            solo: true 
         },
         hide: 'unfocus',
         style: {
            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
         }
      })
   })

   // Make sure it doesn't follow the link when we click it
   .click(function(event) { event.preventDefault(); });
});

CSS

.ui-tooltip-wiki{
   max-width: 440px;
}

   .ui-tooltip-wiki .ui-tooltip-content{
      padding: 10px;

      line-height: 12.5px;
   }

   .ui-tooltip-wiki h1{
      margin: 0 0 7px;

      font-size: 1.5em;
      line-height: 1em;
   }

   .ui-tooltip-wiki img{ padding: 0 10px 0 0; }

   .ui-tooltip-wiki p{ margin-bottom: 9px; }
   .ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }

Пожалуйста, помогите мне!!:) Извиняюсь, если этот пост выглядит глупо, это мой первый вопрос по stackru.

Answer 1

Я думаю, ты делаешь это слишком сложным. Функциональность qTip ajax просто запрашивает URL, а возвращаемое значение - это содержимое HTML внутри div тег. Если вы посмотрите на источник упомянутой вами демонстрации, вы увидите запрос на http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. Если вы посмотрите на то, что это производит, то это просто тег div с некоторым содержимым (стиль выглядит по-другому, потому что он далее преобразуется CSS страницы).

Поэтому возникает вопрос: можете ли вы предоставить свой динамический контент в div в ответ на URL в Rails? Конечно! Возможно, вы хотите настроить SnippetController с show действие, а затем с использованием довольно стандартных Rails соглашений / маршрутов ваш URL может быть /snippet/show/[ID] и у вас просто есть представление произвести требуемое div содержание.