Rails如何在選擇下拉選項後通過Ajax更新索引視圖

Question

我有一個帶有'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%> 

Answer 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」文件並處理那裏的操作。