1

検索フォームを作成しようとしていますが、特定の状況で UJS を使用する適切な方法を理解するのに苦労しています。私が抱えている主な問題は、フォームで選択したパラメーターを取得してクエリを実行し、検索結果を返す方法がわからないことです。

ドロップダウン選択要素と日付フィールドを使用して、モデルからいくつかの「検索基準」を選択できるようにしたいと考えています。検索項目を選択してクエリを作成したら、POST または GET リクエストを送信し、結果を返して、ページをリロードせずに ajax を介して検索フォームの下のリストに表示したいと考えています。

現在、次のようにルートを設定した search という静的ページがあります。

match '/search', to: 'search#index'

index.html.erb

<h1>Search</h1>

<!-- search form -->
<div id="search">  
  <%= render 'form' %>
</div>

<!-- search results -->
<div id="results">
</div>

collection_select() メソッドを使用して構築された検索フォームのドロップダウン メニューに配置する項目のすべてのコレクションの読み込みを処理する「インデックス」アクションを備えた SearchController があります。

検索コントローラー

class SearchController < ApplicationController
  def index
      # load up all the items to display as selectable search parameters to build query from
      # Collections, Categories, Names
      @collections = Collection.all
      @categories = Category.all
      @names = Name.all            
  end

  def create
    @collection = Collection.find(params[:collection][:id])
    @category = Category.find(params[:category][:id])
    @name = Name.find(params[:fullname][:id])      

    respond_to do |format|
      format.html { redirect_to search_url }
      format.js
    end    
  end
end

部分的に使用しているフォーム: _form.htm.erb

<%= form_tag( {controller: "search"}, class: "search_form", remote: true) do %>
  <%= label_tag("Categories: ") %>
  <%= collection_select(:category, :id, @categories, :id, :name, {}, html_options = { multiple: false }) %>

  <%= label_tag("Collections: ") %>
  <%= collection_select(:collection, :id, @collections, :id, :title, {}, html_options = { multiple: false }) %>

  <%= label_tag("Names: ") %>
  <%= collection_select(:name, :id, @names, :id, :fullname, {}, html_options = { multiple: false }) %>

  <%= submit_tag("Submit") %>
<% end %>

ページでフォームを送信すると、Chrome コンソールにパラメーターを含む ajax リクエストが表示されます。ハッシュで form_tag にアクションを与えようとしましたが、routes.rb ファイルで指定しない限り、ルートを見つけることができないようです。

元、

<%= form_tag( {controller: "search", action: "create"}, class: "search_form", remote: true) do %>

Q: ajax を使用している場合、特別なルートが必要ですか?

Q: パラメータを任意の名前の SearchController アクションに取り込み、何かを行うにはどうすればよいですか?

アクションがどのように機能するかがわかるように、最初に検索クエリ項目を結果 div のテキストとして表示できるようにしたいと考えています。js/jQuery を使用して、結果の div に送信されたパラメーターの値を追加するだけだと思います。

Q: このようなことを行う別の方法はありますか?

4

1 に答える 1

1

このアプローチを使用することを強くお勧めします: 検索、並べ替え、AJAX によるページ付け

ちなみに、作成者が使用している jquery メソッド .live() は古く、.delegate() jquery documentation .deleate()に置き換えられました

于 2013-10-15T14:57:08.127 に答える