CODEWITHSUNDEEP
jqueryruby-on-railsajax
r3b00t
r3b00t

Reputation: 7533

Rails ajax, not able to append new record in table

I am trying to use ajax in my rails application. My ajax is working fine while displaying _form to create new student record. But once I create new student I want to hide the _form and display list of students with new student record added at bottom of table.

Currently my code is creating new student record, hiding the new _form and showing the list of students. But due to some reason the new student record is not getting appended at the bottom of the table. Once I refresh the page then I can see the record of new student displayed at the bottom on the table. But I would like to achieve this behaviour without refreshing the page.

Below are my codes:

students_controller.rb

  def index
    @students = Student.all
  end

  def new
    @student = Student.new
  end

  def create
    @student = Student.new(student_params)
    @student.save
  end

  private 

  def student_params
    params.require(:student).permit(:name)
  end

index.html.erb file

<div id="student-list">
  <h1>Listing Students</h1>

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th colspan="3"></th>
      </tr>
    </thead>

    <tbody>
      <div id='all-students'>
        <%= render @students %>
      </div>
    </tbody>
  </table>

  <br>

  <%= link_to 'New Student', new_student_path, remote: true %>

</div>

<div id='new-form'></div>

_student.html.erb partial

<tr>
  <td><%= student.name %></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: 'Ary you sure?' } %></td>
</tr>

new.js.erb file (this one is working fine)

$("#student-list").hide();
$("#new-form").html("<%= j render 'form' %>");

_form.html.erb partial

<%= form_for(@student, remote: true) do |f| %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<%= link_to '<< back', students_path, remote: true %>

create.js.erb file (this is the file which is not working)

$("#all_students").append("<%= j render @student %>");
$("#new-form").hide();
$("#student-list").show();

I am using Rails 4.2.5 and ruby 2.3.0

Here is output from rails server

Started POST "/students" for ::1 at 2016-03-24 00:44:23 +1100
Processing by StudentsController#create as JS
  Parameters: {"utf8"=>"✓", "student"=>{"name"=>"dd"}, "commit"=>"Create Student"}
   (0.1ms)  begin transaction
  SQL (0.3ms)  INSERT INTO "students" ("name", "created_at", "updated_at") VALUES (?, ?, ?)  [["name", "dd"], ["created_at", "2016-03-23 13:44:23.465302"], ["updated_at", "2016-03-23 13:44:23.465302"]]
   (0.7ms)  commit transaction
  Rendered students/_student.html.erb (0.4ms)
  Rendered students/create.js.erb (8.4ms)
Completed 200 OK in 21ms (Views: 18.6ms | ActiveRecord: 1.0ms)

Here is output from browser (Chrome -> Network -> XHR)

$("#all_students").append("<tr>\n  <td>dd<\/td>\n  <td><a href=\"/students/43\">Show<\/a><\/td>\n  <td><a href=\"/students/43/edit\">Edit<\/a><\/td>\n  <td><a data-confirm=\"Ary you sure?\" rel=\"nofollow\" data-method=\"delete\" href=\"/students/43\">Destroy<\/a><\/td>\n<\/tr>\n");
$("#new-form").hide();
$("#student-list").show();

Upvotes: 0

Views: 1167

Answers (1)

nflorentin
nflorentin

Reputation: 68

In your file create.js.erb, replace #all_students with #all-students.

Upvotes: 2

Related Questions