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

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

Solution 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 %>")

Comments

[Deepesh]

Please add remote: true to the form also else it will always send HTML request

[Praveen KJ]

Hey Yen-Ju This is the whole view page <%= form_for @new_entry, :html => {:class => 'home-form without-entry clearfix'}, remote: true do |f| %> <%= f.text_field :title, placeholder: 'Squirrel', autofocus: true, class: 'title-field pull-left' %> <%= f.submit '', class: 'btn home-add without-entry' %> <% end %> <div class="col-xs-12 content-box" id="content-box"> <p class="instructions count-instruction text-center"> <%= @words.count %> </p> </div> so what do i want to do in create.js.erb?

[Praveen KJ]

to replace the bottom content-box div alone?

[Praveen KJ]

Hi @Suman ghosh, as mentioned earlier, i m new to rails. i did til remote:true that updates the DB. I m wondering how to show the updated content with respond_to as i never used it before. <div class="col-xs-12 content-box" id="content-box"><%= @words.count %></div> . I want to change the count everytime on ajax submit. so can u please help me with that respond_to section?

[Praveen KJ]

format.html { redirect_to :back } format.js So what do i want to do in this section?

[sghosh968]

@PraveenKJ you are very close, you just need to write a create.js.erb file which updates the content of the <p > tag after a new record is created. So here you have to add an id to the <p> element whose content you want to update lets say <p id="words-count" class="instructions count-instruction text-center"> <%= @words.count %> </p> and in create.js.erb => $('#words-count').html("<%= @words_count %>");(Assuming you have assigned words count in your action )