在Rails 4中使用AJAX进行搜索、排序和分页

Question

我正试图在Rails 4.0.1应用程序中进行实时搜索。我使用了Railscasts #240教程，但我没有得到与cast相同的结果。似乎我唯一的问题是AJAX脚本，但我不知道为什么或如何。

app/views/subproducts/index.html.erb

<%= form_tag subproducts_path, :method => 'get', :id => "subproducts_search" do %>
  <p>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
  </p>
  <div id='subproducts'>
    <%= render 'subproducts' %>
  </div>
<% end %>

---

app/views/index.js.erb

$('#subproducts').html('<%= escape_javascript(render("subproducts")) %>');

---

app/views/_subproducts.html.erb

<table class="table table-stripped">
  <thead>
    <tr>
      <th><Center>Nombre</Center></th>
      <th><Center>Codigo</Center></th>
      <th><Center>Marca</Center></th>
      <th><Center>Categoria</Center></th>
      <th><Center>Precio De Compra</Center></th>
      <th><Center>Precio De Venta</Center></th>
    </tr>
  </thead>
  <tbody>
    <% for subproduct in @subproducts%>
      <tr>
        <td><CENTER><%= subproduct.name %></CENTER></td>
        <td><CENTER><%= subproduct.code %></CENTER></td>
        <td><CENTER><%= subproduct.product.brand %></CENTER></td>
        <td><CENTER><%= subproduct.product.category %></CENTER></td>
        <td><CENTER><%= subproduct.product.bought_price %></CENTER></td>
        <td><CENTER><%= subproduct.product.sale_price %></CENTER></td>
      </tr>
    <% end %>
  </tbody>
</table>
<%= will_paginate @subproducts %>

---

app/models/subproduct.rb

class Subproduct < ActiveRecord::Base
  belongs_to :product
  belongs_to :sale
  attr_accessible :code, :sale_id, :available, :name
  def cancelar_venta
    self.available = true
    self.sale_id = nil               
  end
  before_create do
    self.available = true
  end
  def self.search(search)
    if search
      where('code LIKE ?', "%#{search}%")
    else
      Subproduct.all
    end
  end
end

---

app/controllers/subproducts_controller.rb

class SubproductsController < ApplicationController
  def create
    @product = Product.find(params[:product_id])
    @subproduct = @product.subproducts.create(params[:subproduct].permit(:code, :name))
    redirect_to product_path(@product)
  end
  def destroy
    @product = Product.find(params[:product_id])
    @subproduct = @product.subproducts.find(params[:id])
    @subproduct.destroy
    redirect_to product_path(@product)        
  end
  def index
    # @subproducts = Subproduct.all
    @subproducts = Subproduct.search(params[:search]).paginate(:per_page => 5, :page => params[:page])     
  end
  def agregar_subproducto_venta
    @subproduct = Subproduct.find(params[:id])
    @subproduct.sale_id = params[:sale_id]
    @subproduct.available = false
    @subproduct.save
    @sale = Sale.find(params[:sale_id])
    @sale.price = @sale.price + @subproduct.product.sale_price  
    @sale.save
    redirect_to sale_path(@sale)
  end
  def eliminar_subproducto_venta
    @subproduct = Subproduct.find(params[:id])
    @subproduct.sale_id = nil
    @subproduct.available = true  
    @subproduct.save
    @sale = Sale.find(params[:sale_id])
    @sale.price = @sale.price - @subproduct.product.sale_price  
    @sale.save
    redirect_to sale_path(@sale)
  end
end

---

public/javascripts/application.js

$(function () {
  // pagination links
  $('#subproducts .pagination a').live('click', function () {
     $.getScript(this.href);
     return false;
  });
  // Search form
  $('#subproducts_search input').keyup(function () {
    $.get($('#subproducts_search').attr('action'), ↵      
    $('#subproducts_search').serialize(), null, 'script');
    return false;
  });
});

Answer 1

我不知道你得到什么错误，所以很难告诉。但从表面上看，这是你的app/views/index.js.erb file。当rails用javascript响应时，它找不到index.js文件。

文件夹路径应该包含类名。因此，你的"app/views/index.js"。"Erb文件"的名称应该是

app/views/subproducts/index.js.erb

注意子产品的添加。

如果不工作，您还可以尝试以下操作:

1)你可以在form_for中使用remote true，然后跳过编写p public/javascripts/application.js文件

2)将remote true添加到form_tag(即 )

<%= form_tag('/articles', remote: true) do %> 
 ...
<% end %>

您可以在这里找到更多关于远程true和rails ajax调用的信息:http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

3)在您的控制器中，您应该有以下

def index 
 @subproducts = Subproduct.search(params[:search]).paginate(:per_page => 5, :page => params[:page])   
 respond_to do |format|
   format.html 
   format.js
 end 
end 

4)在app/views/subproducts/index.js中。Erb文件添加你的代码

$('#subproducts').html('<%= escape_javascript(render("subproducts")) %>');

希望这两个选项中有一个适合你。