Rails 通过 ajax 提交表单并更新视图

Question

我想通过 ajax 更新表单提交而不重新加载页面并根据它更新视图。我尝试了不同的方法，但由于我是 Rails 新手而失败了。

情况是这样的。

在模态中

def new
    @new_entry = current_user.notes.build
    @words = current_user.notes
    @notes_false_list = current_user.notes.where(known: false).order("title").group_by { |note| note.title[0] }
    @notes_true_list = current_user.notes.where(known: true).order("title").group_by { |note| note.title[0] }
  end

在查看表单代码。

<%= form_for @new_entry, :html => {:class => 'home-form without-entry clearfix'}  do |f| %>
      <%= f.text_field :title, placeholder: 'Squirrel', autofocus: true, class: 'title-field pull-left' %>
      <%= f.submit '', class: 'btn home-add without-entry' %>
  <% end %>

创建动作

def create
    @new_note = current_user.notes.build(new_note_params)
    if @new_note.save
      @notes_list = current_user.notes.count
      unless @new_note.user.any_entry
        @new_note.user.toggle!(:any_entry) if @notes_list >= 50
        redirect_to root_url
      end
    else
      redirect_to root_url
    end
  end

最后在我想要改变的视图中

<p class="instructions count-instruction text-center">
      <%= @words.count %>
    </p>

花了很多时间用 AJAX 更新它，但每次都失败了。有什么可以帮忙的吗？提前致谢。

Answer 1

你的代码很好，但是对于 ajax，

1. 您需要在表单中添加remote=true。

   <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>

2. 此外，在您的服务器端，您需要在其中创建一个 js.erb 文件 views/users/show_updated_view.js.erb 作为 js 回复浏览器 调用而不是 html 调用，因此需要向用户显示表单提交后发生的事情（成功/错误）（如果是 users_controller），

所以在你的行动中，你需要这样的东西：-

        respond_to do |format|  
            format.js { render 'users/show_updated_view'}
        end  

1. 在show_updated_view.js.erb 中，您应该为用户更新您的视图 知道视图已更新或表单已成功 通过隐藏整个表单/重置表单或 用新的 div 替换表单，表示数据已更新..或任何直观的东西。不过有很多方法:)。

   //这里我用带有消息的 div 替换你的整个表单

   $("#your_form_id").html("<div><p>You have submitted the form successfully.</p></div>");

视图的名称可以是任何名称，但您需要兼顾成功和失败。

Answer 2

这是short article on doing AJAX with Rails。需要注意的几点：

1. 在您的form_for 中添加remote: true。
2. 在您的控制器中包含 format.js，以便它呈现 create.js.erb。

3. 在 create.js.erb 中，执行如下操作（未测试）：

   $("p.instructions").innerHTML("<%= @notes_list %>")

Answer 3

使用 AJAX 要记住的是，您不会重定向请求（通常），您只需生成一些文本以发送回浏览器。 AJAX 基本上只是 javascript 从浏览器获取一些文本并对其进行处理。通常，您会希望用您返回的文本替换页面的一部分，即替换一个 html 标记及其内容，在这种情况下，您希望文本是一些 html。在rails中渲染一大块html的方法是渲染一个部分，所以你这样做，你也经常做一些javascript来告诉浏览器如何处理文本，通常是用一个特定的id替换一个元素文本。

def create
  @new_note = current_user.notes.build(new_note_params)
  if @new_note.save 
    @notes_list = current_user.notes.count
    unless @new_note.user.any_entry
      @new_note.user.toggle!(:any_entry) if @notes_list >= 50
    end
  end
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js #default behaviour is to run app/views/notes/create.js.erb file
  end
end

这里的 respond_to 块允许您以不同的方式处理 html 和 js（例如 ajax）请求。

app/views/notes/create.js.erb 可能有类似

page.replace "foo", :partial => "app/views/notes/bar"

Answer 4

尝试在您的控制器操作“create”中添加respond_to block，并在相应的 create.js.erb 中添加您想要在创建操作后执行的 js，并发布您遇到的任何错误浏览器控制台或 Rails 服务器控制台，这样做我们可以帮助您找到错误的地方