使用AJAX更新部分視圖

我有許多圖像的頁面，每個圖像都有一個用於在該圖像上提交標籤的關聯文本框。每個圖像和文本框都通過局部視圖呈現。目前，我可以更新標籤，並且可以通過整頁刷新正常工作。我希望能夠通過AJAX做到這一點，但我遇到了一些麻煩。使用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方法在控制器I添加圖像的標籤到數據庫，然後要重新加載該圖像的部分視圖。

這裏是控制器的重定向代碼：

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，所以任何幫助將不勝感激。我想我已經包含了所有相關的代碼，但是讓我知道是否還有其他我應該提供的內容。謝謝！

來源

2011-07-15 jnevelson

我看到錯誤的一件事是，你不能爲每個圖像div使用#image（假設頁面上有很多這樣的圖標）。

任何時候你使用這樣的元素ID，它必須是唯一的整個頁面，否則jQuery將找到#image的第一個實例，然後停止。所以，你需要通過可能包括模型ID等，以使各個圖像ID的獨特的所以這將是#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)

來源

2011-07-16 04:49:42 iwasrobbed

我實際上更新了我的div id，正是你發表這個問題後所說的。它現在在我的OP中更新。我評論了格式。html行，現在當我在表單中提交一些內容時，它不會呈現任何HMTL。我看到「http：// localhost：3000/images/update_tags？remote = true＆image = 1」作爲URL，並且我看到了在Rails服務器中提交的參數，但沒有呈現HTML。這是否意味着我的JavaScript沒有被調用？ JS文件是不是應該在控制器中調用的方法命名（在我的例子中是update_tags.js.erb）？ – jnevelson

看到我更新的答案，我想你可能會缺少Rails jquery適配器，這是Rails如何處理AJAX調用 – iwasrobbed

在此行中<div id="image_#{image.id}"> BC你是一個軌道視圖中你不能做正常的Ruby字符串插值。需要<div id="image_<%= image.id %>

來源

2013-06-05 13:17:01

使用AJAX更新部分視圖

回答

相關問題