RJS:在select_tag上使用observe_field

Jav*_*ier 2 ruby-on-rails rjs

我的应用程序中的下拉菜单(由select_tag构建)应在用户更改下拉菜单中的值时立即调用filter-category-action并点击"Go"按钮.

现在我想摆脱'Go'按钮并让观察者(observe_field?)在用户更改下拉菜单中的值时立即调用filter-category-action.

下面你看到我写的代码.它使用'Go'-Button工作,但只是更改下拉菜单中的值不起作用.我的observe_category_select-helper出了什么问题?

视图 - 部分与下拉菜单和项目列表

    <!-- drop down menu -->
    <% form_tag(filter_category_path(:id), :method => :post, :class => 'categories') do %>
       <label>Categories</label>
       <%= select_tag(:category, options_for_select(Category.all.map {|category| [category.name, category.id]}, @category_id)) %>
       <!-- i would like to get rid of this button -->
       <%= submit_tag "Go" %>
     <% end %>

   <!-- list of projects related to categories chosen in drop down menu -->
   <ul class="projects">
     <% @projects.each do |_project| %>
       <li>
         <%= link_to(_project.name, _project) %>
       </li>
     <% end %>
   </ul>

   <%= observe_category_select -%>
Run Code Online (Sandbox Code Playgroud)

HelperMethod

  def observe_category_select
    observe_field(
                  :category,
                  :url        =>  filter_category_path(:id),
                  :with       =>  'category',
                  :on         =>  'change'
    )
  end
Run Code Online (Sandbox Code Playgroud)

Javascript-HelperMethod的输出

<script type="text/javascript">
//<![CDATA[
   new Form.Element.EventObserver('category', function(element, value) {
     new Ajax.Request('/categories/id/filter', {asynchronous:true, evalScripts:true, parameters:'category=' + encodeURIComponent(value) + '&authenticity_token=' + encodeURIComponent('edc8b20b701f72285068290779f7ed17cfc1cf8c')})
   }, 'change')
//]]>
</script>
Run Code Online (Sandbox Code Playgroud)

分类控制器

class CategoriesController < ApplicationController
  def show
    @category = Category.find(params[:id])
    @category_id = @category.id
    @projects = @category.projects.find(:all)

    respond_to do |format|
      format.html # index.html.erb
    end
  end

  def index
    @projects = Category.find(params[:id]).projects.find(:all)

    respond_to do |format|
      format.html # index.html.erb
    end
  end

  def filter
    @category = Category.find(params[:category])
    @category_id = @category.id
    @projects = @category.projects.find(:all)

    respond_to do |format|
      format.html # index.html.erb
    end    
  end
Run Code Online (Sandbox Code Playgroud)

结束

'rake routes |的输出 grep过滤器'

             filter_category POST   /categories/:id/filter                   {:controller=>"categories", :action=>"filter"}
   formatted_filter_category POST   /categories/:id/filter.:format           {:controller=>"categories", :action=>"filter"}
Run Code Online (Sandbox Code Playgroud)

Ian*_*ell 6

您的过滤器控制器操作需要响应Javascript而不是仅响应正常的HTTP请求.

def filter
  @category = Category.find(params[:category])
  @category_id = @category.id
  @projects = @category.projects.find(:all)

  respond_to do |format|
    format.js # filter.rjs
  end    
end
Run Code Online (Sandbox Code Playgroud)

或者,如果您希望该操作在任一上下文中响应,请将两者放在块中:

respond_to do |format|
  format.html # filter.html.erb
  format.js # filter.rjs
end    
Run Code Online (Sandbox Code Playgroud)

这要求您有一个视图文件filter.rjs,它看起来像:

page.replace_html :id_of_element_to_replace_html, :partial => "name_of_partial"
Run Code Online (Sandbox Code Playgroud)