ajax 没有响应 - create.js.erb

Question

我正在使用 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("<%= j render(@photo) %>");

_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 不起作用，即使我只放了 alert('help');在我的 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'

/photos/_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("<%= j render(@photo) %>");

/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...不是 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 handles "collections" 通过调用 _[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（您可以sign up for free它只是一个测试应用）：

您的代码结构看起来不错，只有控制器和 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 %>