Using AJAX to search, sort, and paginate in Rails 4

问题

I'm trying to do a real-time search in a Rails 4.0.1 application. I used the Railscasts #240 tutorial, but I am not getting the same results as the cast. It seems that my only issue is with the AJAX script, but I don't know why or how.

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:

I do not know what error you are getting so its hard to tell. But from the looks of things it is your app/views/index.js.erb file. When rails responds with javascript it can not find the index.js file.

The folder path should include the class name. Thus, your "app/views/index.js.erb file" name should be

app/views/subproducts/index.js.erb

note the addition of subproducts.

In the event that does not work you can also try out the following:

1) You can use remote true with your form_for and then skip on writing the p ublic/javascripts/application.js file

2) Add remote true to your form_tag (i.e)

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

you can find more information on remote true and rails ajax calls here: http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

3) In your controller you should have the following

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) in app/views/subproducts/index.js.erb file add your code

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

Hopefully one of those two options works for you.

来源：https://stackoverflow.com/questions/23838777/using-ajax-to-search-sort-and-paginate-in-rails-4

标签

javascript

ruby-on-rails

ajax

ruby-on-rails-4

railscasts