How to use Ajax in Rails

In this tutorial we are going to see a brief on "How to use Ajax in Rails". If you want to watch the video of this tutorial than you can watch the following video.



To get started with, create two dropdown list one is for selecting class and another is for selecting section.

If you are not familiar with dropdown in rails than watch this tutorial. So following snippet of code for two dropdowns. In the div with id "result_id" we are going to display the result content.

<%= select_tag "class_name", options_for_select(Student::CLASS_LIST, {:id=>"class_name"}) %>
<%= select_tag "section", options_for_select(Student::SECTION_LIST, {:id=>"section"}) %>

  <div id="result_div">
    <h4>List of Students</h4>
  </div>

Now on the selection/change of section dropdown we are going to call ajax function. Write the following script for ajax function.

<script>
  $(document).ready(function() {
    $('#section').change(function() {
        $.ajax({
           url: "<%= update_student_list_path %>",
           data: {
               c_name: $("#class_name option:selected").text(),
               s_name: $("#section option:selected").text()
           },
           dataType: "script"
        });
    });
  });
</script>

Here in the ajax function, a url named "update_student_list_path" is being called by the ajax function with some data namely "c_name" and "s_name". These are the class name and section on the basis of which we are going to fetch student list. The url "update_student_list_path" should have the entry in routes.rb file.

routes.rb

get "students/update_student_list" => 'students#update_student_list', as: "update_student_list"

This url will call the action "update_student_list" which we are going to define in the student controller.

student_controller.rb

def update_student_list
    @student_with_class = Student.where(class_name: params[:c_name], section: params[:s_name])
    respond_to do |format|
      format.js 
      format.html
    end  
  end

Here we are fetching the list of the student from "Student" model based on our parameter i.e. class and section which were passed by ajax function.
After fetching the record, this action will render a corresponding view (i.e. a view with the name "update_student_list"). Make a new file in the view and name it as "update_student_list.js.erb".
The content of this file will be rendered to the "result_div".

update_student_list.js.erb

$('#result_div').html("<%= j (render 'show_students') %>");

Here, we are rendering a partial named "show_students" which have all the code to list the student. So, make a new file named as "_show_students.html.erb" which have the following code to display the student list.

_show_students.html.erb

<% if @student_with_class.empty? %>
 <h4>No records to display</h4>
<% else %>

 <table>
   <thead>
     <tr>
       <th>Enrollment no</th>
       <th>Roll no</th>
       <th>Class</th>
       <th>Section</th>
       <th>Address</th>
       <th>Father name</th>
       <th>Mother name</th>
       <th>Parents contact no</th>
       <th>Additional contact no</th>
       <th>Parents email</th>
       <th>Student contact no</th>
       <th>Alumni</th>
       <th colspan="3"></th>
     </tr>
   </thead>

   <tbody>
     <% @student_with_class.each do |student| %>
       <tr>
         <td><%= student.enrollment_no %></td>
         <td><%= student.roll_no %></td>
         <td><%= student.class_name %></td>
         <td><%= student.section %></td>
         <td><%= student.address %></td>
         <td><%= student.father_name %></td>
         <td><%= student.mother_name %></td>
         <td><%= student.parents_contact_no %></td>
         <td><%= student.additional_contact_no %></td>
         <td><%= student.parents_email %></td>
         <td><%= student.student_contact_no %></td>
         <td><%= student.alumni %></td>
         <td><%= link_to 'Show', student %></td>
         <td><%= link_to 'Edit', edit_student_path(student) %></td>
         <td><%= link_to 'Destroy', student, method: :delete, data: { confirm: 'Are you sure?' } %></td>
       </tr>
     <% end %>
   </tbody>
 </table>
<% end %>