Обновление частичного представления с помощью AJAX

Question

У меня есть страница со многими изображениями, каждое из которых имеет соответствующее текстовое поле, используемое для отправки тегов на это изображение.Каждое изображение и текстовое поле отображаются с частичным представлением.В настоящее время я могу обновлять теги, и все работает правильно через полное обновление страницы.Я хотел бы иметь возможность делать все это через AJAX, но у меня возникли некоторые проблемы с этим.

Вот код формы в частичном представлении:

<%= image_tag image.src %>
<%= form_tag :controller => "images", :action => :update_tags, :remote => true, :image => image.id do %>
  <td><%= label_tag "Tags:" %></td>
  <td><%= text_field_tag :tags, image.tags %></td>
  <td><%= submit_tag "Submit" %></td>
<% end %>

ИОсновная форма, которая вызывает частичное:

<% @images.each do |image| %>
  <div id="image_#{image.id}">
    <%= render :partial => "image_tag", :locals => { :image => image } %>
  </div>
<% end %>

В методе: update_tags в контроллере я добавляю теги изображения в БД и затем хочу перезагрузить частичное представление этого изображения.

Воткод перенаправления контроллера:

respond_to do |format|
  format.js
  format.html { redirect_to :back, :remote => true }
end

и update_tags.js.erb:

$("#image_#{image.id}").html( "<%= escape_javascript(render :partial => 'image_tag', :locals => {:image => image} ) %>" );

В настоящее время он работает функционально, но волшебство AJAX не происходит.Я все еще изучаю Rails и jQuery, поэтому любая помощь будет принята с благодарностью.Я думаю, что я включил весь соответствующий код, но дайте мне знать, если есть что-то еще, что я должен предоставить.Спасибо!

Answer 1

Одна вещь, которую я вижу неправильно, это то, что вы не можете использовать #image для каждого из ваших divов изображения (при условии, что на странице их много).

Каждый раз, когда вы используете подобный идентификатор элемента, он должен быть уникальным для всей страницы, в противном случае jQuery найдет первый экземпляр #image и затем остановится.Итак, вам нужно сделать каждый из этих идентификаторов изображений уникальным, возможно, включив идентификатор модели и т. Д., Чтобы они были #image_1 #image_2 и т. Д.

Другое дело, почему у вас есть

format.html { redirect_to :back, :remote => true }

в действии контроллера для вызова AJAX?AJAX только собирается вернуть format.js, так что это кажется ненужным.Может быть, я что-то не так понимаю.

Остальная часть вашего кода выглядит правильно.Возможно, вы захотите проверить журнал сервера Rails, чтобы убедиться, что ваш файл update_tags.js.erb отображается во время вызова.Если это так, то у вас ошибка javascript.

Обновление: Вам также необходимо убедиться, что это установлено, чтобы Rails мог правильно запускать ваши вызовы AJAX https://github.com/rails/jquery-ujs

Вам не нужно отображать HTML, если вы используете AJAX.По умолчанию он будет отображать controller_action_name.js.erb, поскольку это вызов AJAX, а не вызов браузера.Вы должны увидеть что-то подобное в выходных данных сервера Rails:

Started PUT "/images/1/update_tags" for 127.0.0.1 at 2011-07-16 09:33:20 -0400
  Processing by ImagesController#update_tags as JS
  Parameters: {"image_id"=>"1"}
  Image Load (1.6ms)  SELECT "images".* FROM "images" WHERE "images"."id" = 1 LIMIT 1
  CACHE (0.0ms)  SELECT "images".* FROM "images" WHERE "images"."id" = 1 LIMIT 1
Rendered images/update_tags.js.erb (11.3ms)
Completed 200 OK in 346ms (Views: 23.7ms | ActiveRecord: 1.7ms)

Answer 2

В этой строке <div id="image_#{image.id}"> вы не можете выполнять обычную интерполяцию строк Ruby, поскольку вы находитесь внутри вида rails.Должен быть <div id="image_<%= image.id %>