Rails通过ajax提交表单并更新视图 [英] Rails submitting a form through ajax and updating the view

问题描述

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

这是情况。

模态

  def new 
 @new_entry = current_user.notes.build 
 @words = current_user.notes 
 @notes_false_list = current_user.notes.where（已知：false）.order（title）。group_by {| note | note.title [0]} 
 @notes_true_list = current_user.notes.where（已知：true）.order（title）。group_by {| note | note.title [0]} 
 end 
  

查看表单代码。

 <％= form_for @new_entry，：html => {：class => 'home-form without-entry clearfix'} do | f | ％GT; 
 <％= f.text_field：title，placeholder：'松鼠'，自动对焦：true，class：'title-field pull-left'％> 
 <％= f.submit''，class：'btn home-add without-entry'％> 
<％end％> 
  

创建操作

  def创建
 @new_note = current_user.notes.build（new_note_params）
 if @ new_note.save 
 @notes_list = current_user.notes.count 
除非@ 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更新，但每次都失败。任何有帮助？提前致谢。 您的代码很好，但对于 ajax ，

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

   <％= form_for（@image，：html => {：id =>your_form_id，：multipart => true，：remote => true}）do | f |％>




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

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

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

3. 并且在 show_updated_view.js.erb 中，您应该将用户的视图更新为
   ，通过隐藏整个表单/重置表单或
   替换表单，使用新的表示数据被更新的方式，视图已被更新或表单已成功提交
   。或任何直观的东西。 ）。/ b>
   
   

   //这里我用你的整个表单替换掉一个信息

   
   
   

   $（＃your_form_id）。html（< div>< p>您已成功提交表单。< / p>< / div>）;

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

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.

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.

解决方案

your code is good,but for ajax,

1. you need to add remote=true to 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.erb file in views/users/show_updated_view.js.erb to 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),

so inside your action,you need something like:-

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

3. 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>");

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

这篇关于Rails通过ajax提交表单并更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！