ajax没有响应 – create.js.erb

我正在使用jquery-file-upload-rails gem在我的表单上上传预览的多个图像。 文件上传工作正常，但只有在浏览器刷新后，部分新照片才会呈现！ 也许，有人可以看到，出了什么问题。

我正在调用文件上传器来加载项目编辑页面中的照片图像：

= f.fields_for :photos, Photo.new do |ff| = ff.file_field :img_file, multiple: true, name: "project[photos_attributes][][img_file]", id: 'new_photo' 

照片控制器：

  def create @project = Project.find(params[:project_id]) @photo = @project.photos.create(params[:photo].permit(:img_file)) respond_to do |format| format.js format.html end end 

photos.js.coffee使jquery-file-uploader-rails gem工作：

 jQuery -> $('#new_photo').fileupload dataType: 'script' 

create.js.erb

 $('#photos').html(""); 

_photo.html.haml

 .photo - @project.photos.each do |photo| = image_tag photo.img_file.thumb = link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete 

所以我可以上传照片。 但是我的ajax不起作用，即使我只提醒（’帮助’）; 在我的create.js.erb中，它没有响应。 我究竟做错了什么？ 提前谢谢了！

更新 现状 （在Rich Peck的帮助下）：

我的模特：

 class Project < ActiveRecord::Base has_many :photos, dependent: :destroy accepts_nested_attributes_for :photos, allow_destroy: true end class Photo < ActiveRecord::Base belongs_to :project validates :img_file, presence: true mount_uploader :img_file, ImageUploader end 

项目管理员：

  def edit @project = Project.find(params[:id]) @project.photos.build end def update @project = Project.find(params[:id]) @project.update(project_params) end params.require(:project).permit(photos_attributes: [:img_file]) 

/项目/编辑

  = form_for @project do |f| = f.fields_for :photos do |p| = p.file_field :img_file, multiple: true, id: 'new_photo' #photos = render 'photos/photo' 

/照片/ _photo

 .photo = image_tag photo.img_file.thumb if photo.img_file? = link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete 

/photos/create.js.erb

 $('#photos').html(""); 

/javascripts/photos.js.coffee

 jQuery -> $('#new_photo').fileupload dataType: 'script' 

Answer 1

使用

 $('#photos').html(escape_javascript("<%= j render(@photo) %>")); 

见http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript

Answer 2

对于ajax文件上传在jquery-file-upload gem中工作

你必须在表单中添加:html => { :multipart => true}

<%= form_for Upload.new, :html => { :multipart => true} } do |f| %> ... <%end%>

请参阅jQuery-File-Upload示例表单以供参考

Answer 3

几个问题。

 #app/controllers/projects_controller.rb class ProjectsController < ApplicationController respond_to :js, :html def new @project = Project.new @project.photos.build #-> this will replace Photo.new in fields_for end def create @project = Project.new project_params @project.save respond_with @project end private def project_params params.require(:project).permit(photos_attributes: [:img_file]) end end #app/views/projects/new.haml = form_for @project do |f| = f.fields_for :photos do |ff| = ff.file_field :img_file, multiple: true, id: 'new_photo' 

使用嵌套属性时，不应该声明嵌套字段的name属性。 它不仅违反惯例，而且还为黑客和漏洞敞开大门。

如果您正在使用nested attributes ，则需要首先传递@project对象，这意味着表单将传递给projects#update或projects#create … not photos#create您现在拥有。

我也强烈建议使用responders gem，它将大量清理你的代码。

–

如果您想自己创建一个新的Photo对象，您将需要使用以下内容：

 #config/routes.rb resources :projects do resources :photos #-> url.com/projects/:project_id/photos/new end #app/controllers/photos_controller.rb class PhotosController < ApplicationController respond_to :js, :html def new @project = Project.find params[:project_id] @photo = @project.photos.new end def create @project = Project.find params[:project_id] @photo = @project.photos.new photo_params @photo.save respond_with @photo end private def photo_params params.require(:photo).permit(:img_file) end end #app/views/photos/new.haml = form_for @photo do |f| = f.file_field :img_field 

---

你的JS代码不正确......

 $('#photos').html("<%= j render(@photo) %>"); 

默认情况下，Rails通过调用_[collection_singular_name].html.erb 处理“集合” - 在您的情况下_photo.html.erb 。 它循环遍历集合以显示每次。 要修复你的，只需从你的部分中删除循环：

 #app/views/photos/_photo.html.erb = image_tag photo.img_file.thumb = link_to 'Remove', photo, data: { confirm: "Are you sure?" }, method: :delete 

---

解

决定您是创建project还是photo 。

如果要创建photo ，则应使用单独的photos控制器（如上所述）。 如果要创建新项目，则应正确使用nested attributes 。 我们之前已多次使用过JQuery-File-Upload （您可以免费注册其唯一的测试应用程序）：

你的代码结构看起来没问题，只有控制器和JS有问题。

---

更新

要通过项目的edit表单添加新照片，只需使用以下内容：

 #app/controllers/projects_controller.rb class ProjectsController < ApplicationController def edit @project = Project.find params[:id] @project.photos.build end def update @project = Project.find params[:id] @project.update project_params end private def project_params params.require(:project).permit(photos_attributes: [:img_file]) end end #app/views/projects/edit.html.erb <%= form_for @project do |f| %> <%= f.fields_for :photos do |p| %> <%= p.file_field :img_file %> <% end %> <%= f.submit %> <% end %>