在Rails 4中使用AJAX搜索，排序和分页 [英] Using AJAX to search, sort, and paginate in Rails 4

问题描述

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

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

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

---

app/views/index.js.erb

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

---

app/views/_subproducts.html.erb

---

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

---

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

---

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

---

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;
  });
});

推荐答案

我不知道您遇到了什么错误，因此很难分辨.但是从外观上看，它是您的app/views/index.js.erb file.当Rails用javascript响应时，找不到index.js文件.

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.

文件夹路径应包含类名称.因此，您的"app/views/index.js.erb文件"名称应为

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)您可以在form_for中使用remote true，然后跳过编写public/javascripts/application.js文件

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

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

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

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

您可以在此处找到有关远程True和Rails Ajax调用的更多信息: http://edgeguides.rubyonrails. org/working_with_javascript_in_rails.html

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

3)在您的控制器中，您应具有以下内容

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)在app/views/subproducts/index.js.erb文件中添加您的代码

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.

这篇关于在Rails 4中使用AJAX搜索，排序和分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！