Rails submits form via ajax and updates view

Question

I want to update the submit form via ajax without reloading the page and update the presentation accordingly. I tried different methods and could not, like I'm new to rails.

Here is 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 the form field.

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

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> 

It has been a long time updating this with AJAX, but not every time. Is anyone there to help? Thanks in advance.

Answer 1

your code is good, but for ajax ,

• you need to add remote=true to your form.

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

• In addition, on your server side you need to create a js.erb file . views/users/show_updated_view.js.erb in order to respond back to the browser as its js call and NOT html and therefore, it is necessary to show the user that something happened (success / error) after the form was users_controller (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 users to know that the view has been updated or the form has been successfully submitted either by hiding the entire form / resetting the form, or replacing the form with a new div saying that the data is being updated .. or whatever is intuitive . There are many ways :).

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

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

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

Answer 2

The thing to remember with AJAX is that you are not redirecting the request (usually), you are just generating text to send back to the browser. AJAX is just javascript to get text from a browser and do something with it. Often you want to replace a section of a page, that is, replace the html tag and its contents with the text that you return, in which case you want the text to be some kind of html. The way to render an html fragment in rails is to render partial, so you do this and you also often use javascript to tell the browser what to do with the text, usually to replace an element with a specific identifier with 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 response_to block allows you to handle html and js requests (e.g. ajax) in different ways.

The application / views / notes / create.js.erb may have something like

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

Answer 3

The following is a short article on creating AJAX with Rails . A few notes:

• Add remote: true to your form_for .
• Include format.js in your controller so that it displays create.js.erb .

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

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

Answer 4

Try adding the response_to block to the action of your "create" controller and the corresponding create.js.erb and put in js that you want to execute after the create action and send any error you get on the browser console or rails server console, do this, we can help you find where you are wrong