Rails如何在选择下拉选项后通过Ajax更新索引视图

时间:2013-11-15 18:41:10

标签: javascript ruby-on-rails ajax drop-down-menu filtering

我有一个带有'dept'属性的产品型号。该模型包括一个部门列表。在我看来是一个包含所有部门类型的下拉列表。我正在尝试从下拉列表中选择一个部门后刷新页面。我希望通过AJAX更新它,但此时我会采取正常的页面参考。

我的模特

 class Product < ActiveRecord::Base
   attr_accessible :dept, :price, :title
   DEPT_TYPES = ["Baby","Beauty"]
 end

我的控制器:

class StoreController < ApplicationController
  def index
    @title= "Home"
    @products = Product.order(:premium)
    @baby , @beauty = [], []
    @products.each do |product|
      @baby << product if product.dept == 'Baby'
      @beauty << product if product.dept == 'Beauty'
    end

    respond_to do |format|
      format.html # index.html.erb
      format.js # index.js.erb
      format.json { render json: @products }
    end 
  end

我的观点

<div class ="filter">
  <select>
    <option value="<%=@baby%>">baby</option>
    <option value="<%=@beauty%>">beauty</option>
  </select>
</div>

 <div id="products_list">
   <% @products.each do |product|%>
     ...
   <%end%>

1 个答案:

答案 0 :(得分:1)

你可以使用简单的ajax jQuery函数:

$(".filter").change(function(){
  var value = $(this).val()
  $.ajax({
    url: <%= stores_path(:json) %>,
    type: 'GET',
    data: value,
    success: function(data){
      $("#products_list").html(data.products)
    }
  })
})

你有两种方法可以做到: 第一个是从服务器发送例如带有所有产品的JSON。或者您可以在视图中创建“.js.erb”文件并处理其中的操作。