Add row to table with jquery and rails

Question

So I have a form with fields button and a table. I fill in the fields with data and press add button. Then a new row appears in my table without page reload ---- this is how it's gonna be

How to do that? Some code below. What am I doing wrong?

this's part from controller

  def create
    @employee = Employee.new(employee_params)
    @employee.save

    respond_to do |format|
      format.html{redirect_to root_url}
      format.js
    end
  end

partial of the table's wrapped this way

<table id="empl-table">
<%= render "employees"%>
</table>

---

<tr>
    <th>FirstName</th>
    <th>LastName</th>
    <th>Position</th>
    <th>Salary</th>
    <th>#</th>
</tr>

<% @employees.each do |employee|%>
<tr>
  <td><%=employee.first_name%></td>
  <td><%=employee.last_name%></td>
  <td><%=employee.position%></td>
  <td><%=employee.salary%></td>
  <td><%= link_to 'Destroy', employee, remote: true, method: :delete%></td>
</tr>
<% end %>

---

_create.js

$("#new_emp").click(function(){
  $("#empl-table").append("
                       <tr>
                       <td><%=employee.first_name%></td>
                       <td><%=employee.last_name%></td>
                       <td><%=employee.position%></td>
                       <td><%=employee.salary%></td>
                       <td><%= link_to 'Destroy', employee, remote: true, method: :delete%></td>
                       <tr>
                       ");
});

upd1(_form.html.erb)

<%= form_for :employee, remote: true, url: employees_path do |f|%>  
  <div class="row">
    <div class="small-3 columns">
    <%= f.label :first_name%>
    <%= f.text_field :first_name%>
    </div>
  </div>

 <div class="row">
   <div class="small-3 columns">
    <%= f.label :last_name%>
    <%= f.text_field :last_name%>
   </div>
  </div>

  <div class="row">
    <div class="small-3 columns">
    <%= f.label :position%>
    <%= f.text_field :position%>
    </div>
  </div>

  <div class="row">
    <div class="small-3 columns">
    <%= f.label :salary%>
    <%= f.text_field :salary%>
    </div>
 </div>

  <%= f.submit 'Add', id: "new_emp",class: 'button radius'%>

<% end %>

upd2

I used to have this as cell content before(i mean just the string I quoted down the text) for every field(employee.name, employee.position....)but nothing happens now

Answer 1

Create Action

def create
    @manufacture = Manufacture.new(manufacture_params)
    @manufactures = Manufactur.all
    respond_to do |format|
      if @manufacture.save
        format.js
      else
        format.html { redirect_to manufactures_url, alert: @manufacture.errors.full_messages }
      end
    end
  end

index.html.erb

<h1>Manufactures</h1>
<table >
  <thead>
    <tr>
      <th>Date</th>
      <th>Product</th>
      <th>Quantity</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody id="manufacture-table">
      <%= render partial: "manufacture_table", locals: { manufacture: @manufactures } %>
  </tbody>
</table>

_manufacture_table.html.erb

<% @manufactures.each do |manufacture| %>
  <tr>
    <td><%= manufacture.date.strftime("%b %d ,%Y")  %></td>
    <td><%= manufacture.product.name %></td>
    <td><%= manufacture.quantity %></td>
    <td><%= link_to 'Edit', edit_manufacture_path(manufacture) %></td>
    <td><%= link_to 'Destroy', manufacture, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>

create.js.erb

$("#manufacture-table").html("<tr><%= j render partial: "manufacture_table", locals: { manufacture: @manufactures } %></tr>");

Answer 2

In _form.html.erb

<%= form_for @article, remote: true do |f| %>
 #rest of the code
 <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
 </p>
 #rest of the code
 <%= end %>

In appropriate controller Create action

if @article.save
 format.html {redirect_to articles_path}
 format.js
else

In index.html.erb

<table id = "article">
 <tr>
    <th>select</th>
    <th>Title</th>
    <th>Text</th>
    <th>Created By</th>
</tr>
    <%= render @articles %>
</table>

Create _article.html.erb (or appropriate name depending on your instance variable)

<tr>
<td><%= article.title %></td>
<td><%= raw(article.text) %></td>
<td><%= link_to 'show', article_path(article) %></td>
<td><%= link_to 'edit', edit_article_path(article) %></td>
<td><%#= link_to 'delete', article_path(article), method: :delete, data:     {confirm: 'Are you sure?' } %></td>
</tr>

create a new file under Article view "create.js.erb" and add

$("#article").append("<tr><%= j render @article %></tr>");

Answer 3

So. I solved my problem using another example app.

This video was helpful http://railscasts.com/episodes/136-jquery-ajax-revised1

1.I added respond for js in my controller

  def create
    @post = Post.new(post_params)

    respond_to do |format|
      format.html{redirect_to root_url}
      format.js  
    end
  end

my problem was - using this line in create controller @post.save

2.Then to add a row to a table I used partial _post.html.erb

<tr id="tr_<%= @post.id%>">
    <%= form_for post, remote: true do |f|%>
      <td><%=post.title %></td>
      <td><%=post.body %></td>
      <td><%=post.author %></td>
      <td><%= link_to "Destroy", post, method: :delete, remote:true %></td>
    <% end %>
</tr>

3.create.js.erb

 <%= @post.save%>    
$("#posts").append('<%= j render(@post)%></tr>');

---

I was also thinking about something like this:

$.ajax({
  url: '/posts/',
  type: 'POST',
  dataType: 'JSON',
  data:{
        title:$('#title_d').val(), 
        body:$('#body_d')val(),
        author:$('#author_d').val()
        }
  success:function(data){
    alert("dfdf");
    $("#posts").append('<tr><td>data.title</td>
                            <td>data.body</td>
                            <td>data.author</td></tr>');
  }
});