Learning Rails: Live Edition

Managing Enrollment through Ajax

The students and courses forms included one slightly complicated form, back in Example 9-4 and Figures 9-17 and 9-18, for adding students to courses and removing them from courses if necessary. It combined showing the list with letting the user change data, and so makes a good candidate for demonstrating Ajax at work. (Code for the demonstration is available in ch16/students009.)

Making the Form More Scriptable

As a first step, before actually adding Ajax components, it’s a good idea to open up the form a bit so that more components are accessible to JavaScript through id attribute values and so users can see more of what’s happening at any given time.

Example 16-1 shows the revised courses.html.erb file, with some key changes highlighted. The entire section for adding courses is changed to mirror the section for removing courses, simplifying and manipulating both sections from JavaScript.

Example 16-1. A courses.html.erb file getting ready for some Ajax manipulation

<h1><%= @student.name %>'s courses</h1>

<% if @courses.length > 0 %>
  <% form_tag(course_remove_student_path(@student), :html => {:id =>
'removal_form'}) do %>
  <table id="CoursesEnrolled">
    <tr>
      <th>Course</th>
      <th>Remove?</th>
    </tr>
  <% for course in @courses do %>
    <tr id = "<%= "dom_id(course)" %>"> <td><%=h course.name %></td> <td><%= check_box_tag "courses[]", course.id %></td> </tr> <% end %> </table> <br /> <%= submit_tag "Remove checked courses" %> <% end %> <% else %> <p>Not enrolled ...