RJS:在select_tag上使用observe_field [英] RJS: Using observe_field on select_tag

问题描述

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

The dropdown-menu (built by the select_tag) in my application should call the filter-category-action as soon as the user changes the value in the dropdown-menu AND hits the 'Go' button.

现在，我想摆脱开始"按钮，让观察者(observe_field?)一旦用户更改下拉菜单中的值，便立即调用filter-category-action.

Now I'd like to get rid of the 'Go' button and have an observer (observe_field?) call the filter-category-action as soon as the user changes the value in the dropdown-menu.

在下面，您将看到我编写的代码.它可以通过运行"按钮使用，但仅通过更改下拉菜单中的值就无法使用.我的watch_category_select-helper有什么问题?

Below you see the code I've written. It works using the 'Go'-Button but doesn't work by just changing the value in the dropdown-menu. What's wrong with my 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 -%>

HelperMethod

  def observe_category_select
    observe_field(
                  :category,
                  :url        =>  filter_category_path(:id),
                  :with       =>  'category',
                  :on         =>  'change'
    )
  end

HelperMethod的Javascript输出

<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>

类别控制器

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

结束

耙路"的输出| grep过滤器"

             filter_category POST   /categories/:id/filter                   {:controller=>"categories", :action=>"filter"}
   formatted_filter_category POST   /categories/:id/filter.:format           {:controller=>"categories", :action=>"filter"}

推荐答案

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

Your filter controller action needs to respond to Javascript instead of just to a normal HTTP request.

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

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

Or, if you want that action to respond in either context, put both in the block:

respond_to do |format|
  format.html # filter.html.erb
  format.js # filter.rjs
end    

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

This requires you to have a view file filter.rjs that will look something like:

page.replace_html :id_of_element_to_replace_html, :partial => "name_of_partial"

这篇关于RJS:在select_tag上使用observe_field的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！