Rails submitting a form through ajax and updating the view

Question

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 im 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.

Answer 1

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.

Answer 2

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

1. Add remote: true in your form_for .
2. Include format.js in 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 %>")

Answer 3

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.

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.

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

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

Answer 4

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