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

Question

我正在尝试在一个Rails 4.0.1应用程序中进行实时搜索。 我使用了Railscasts #240教程，但我的结果与视频不同。似乎我的问题只是在于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;
  });
});

- Oscar_sgc

---

你遇到了哪些错误？ - Austio

@Oscar_sgc 我遇到了同样的问题，但我使用的是HAML而不是HTML。我的日志文件中没有显示任何错误，这意味着我的“show_workers.js.haml”文件没有响应。下面是该文件的代码： $("#workers").html("#{escape_javascript(render("workers"))}"); 如果您已经找到解决方案，请告诉我，因为我遵循了相同的情节，最后通过AJAX搜索和排序不起作用，但是在没有AJAX的情况下完全正常工作。 - Arif Usman

@Arif 我自己也在寻找新的教程，因为这个 Railscast 太旧了，已经不能再使用了。AJAX/JS 部分是 5 年前的内容，有些方法已经被弃用。而且我不建议你降级你的 gems！ - onebree

Answer 1

我不知道你的错误是什么，所以很难确定。但从情况来看，可能是你的app/views/index.js.erb文件出现了问题。当Rails返回JavaScript时，它找不到index.js文件。

文件夹路径应该包括类名。因此，你的"app/views/index.js.erb 文件"名称应为：

app/views/subproducts/index.js.erb

请注意子产品的添加。

如果这不起作用，您还可以尝试以下操作：

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

2）将remote true添加到您的form_tag中（即）。

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

您可以在这里找到有关remote 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")) %>');

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

- Greg L