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

时间:2014-05-23 21:47:51

标签: javascript ruby-on-rails ajax ruby-on-rails-4 railscasts

我正在尝试在 Rails 4.0.1 应用程序中进行实时搜索。 我使用了Railscasts #240 tutorial,但是我没有得到与演员相同的结果。似乎我唯一的问题是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'), &crarr;      
    $('#subproducts_search').serialize(), null, 'script');
    return false;
  });
});

1 个答案:

答案 0 :(得分:2)

我不知道你得到了什么错误,所以很难说。但从事物的外观来看,这是你的app/views/index.js.erb file。当rails用javascript响应时,它找不到index.js文件。

文件夹路径应包含类名。因此,您的“app / views / index.js.erb文件”名称应为

app/views/subproducts/index.js.erb

注意添加副产品。

如果不起作用,您还可以尝试以下方法:

1)你可以使用你的form_for远程true,然后跳过编写p ublic / 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")) %>');

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