railsr railsr - 7 months ago 114
Javascript Question

Add row to table with jquery and rails

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

terminal

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

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>');

enter image description here


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>');
  }
});
Comments