使用 jquery 和 rails 向表中添加行

Question

所以我有一个带有字段按钮和表格的表单。我用数据填写字段，然后按添加按钮。然后在我的表中出现一个新行，无需重新加载页面----这就是它的样子

如何做到这一点？下面的一些代码。我做错了什么？

这是控制器的一部分

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

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

表格的一部分是这样包裹的

<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

我以前将它作为单元格内容（我的意思是我在文本中引用的字符串）每个字段（employee.name，employee.position....），但现在什么都没有发生

Answer 1

所以。我使用另一个示例应用解决了我的问题。

这个视频很有帮助http://railscasts.com/episodes/136-jquery-ajax-revised1

1.我在控制器中添加了对js的响应

  def create
    @post = Post.new(post_params)

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

我的问题是 - 在创建控制器中使用这一行 @post.save

2.然后向我使用部分 _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>');

---

我也在考虑这样的事情：

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

Answer 2

在_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 %>

在适当的控制器中创建动作

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

在 index.html.erb 中

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

创建 _article.html.erb（或适当的名称，具体取决于您的实例变量）

<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.js.erb”下新建文件并添加

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