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

Rails submitting a form through ajax and updating the view

提问by Praveen KJ

I want to update a form submit through ajax without reloading the page and update the view according to it. I tried the different methods and failed as i m new to rails.

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

Here's the situation.

这是情况。

In modal

在模态

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

In view the form code.

在查看表单代码。

<%= 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 %>

The create action

创建动作

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

and finally in the view i want to change

最后在我想改变的观点中

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

Spent a lot of time updating this with AJAX but failed everytime. Any there to help? Thanks in advance.

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

回答by Milind

your code is good,but for ajax,

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

1. you need to add remote=trueto your form.

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

2. Moreover at your server side,you need to create a js.erbfile in views/users/show_updated_view.js.erbto reply back to browser as its a js call and NOT html call and hence need to show the user that something happened(success/error) after form submission (if its users_controller),

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),

so inside your action,you need something like:-

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

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

1. And in show_updated_view.js.erb,you should update your view for the users to know that the view has been updated or form has been successfully submitted by either hiding the entire form/resetting the form or replacing the form with new div saying that data is updated..or anything that is intuitive.There are many ways though :).

   //here i am replacing your entire form with div having a message

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

3. 并且show_updated_view.js.erb，您应该更新您的视图，让用户知道视图已更新或表单已成功提交，方法是隐藏整个表单/重置表单或用新的 div 替换表单，表示数据已更新..或任何直观的东西。虽然有很多方法:)。

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

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

The name of the view can be anything but you need to take care of both success and failure.

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

回答by Yen-Ju

Here is a short article on doing AJAX with Rails. A few things to note:

这是一篇关于使用 Rails 进行 AJAX的简短文章。需要注意的几点：

1. Add remote: truein your form_for.
2. Include format.jsin your controller so that it will render create.js.erb.

3. In create.js.erb, do something like this (not tested):

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

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

3. 在create.js.erb 中，做这样的事情（未测试）：

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

回答by sghosh968

Try adding respond_to blockin your controller action "create", and respective create.js.erb and put in your js that you want to get executed after the create action, and do post any error that you are getting on your browser console or rails server console, do that we can help you find where you are getting wrong

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

回答by Max Williams

The thing to remember with AJAX is that you don't redirect the request (normally), you just generate some text to send back to the browser. AJAX is basically just javascript to get some text from the browser and do something with it. Often, you would want to replace a section of the page, ie replace an html tag and it's contents, with the text you get back, in which case you want the text to be some html. The way to render a chunk of html in rails is to render a partial, so you do that, and you often also do some javascript to tell the browser what to do with the text, usually to replace an element that has a specific id with the text.

使用 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

the respond_to block here allows you to treat html and js (eg ajax) requests differently.

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

The app/views/notes/create.js.erb could have something like

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

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