2011-06-21 2 views
1

私は会場のテーブルを持っています。会場インデックスページでは、デフォルトですべての会場記録が一覧表示され、エリアごとにフィルタリングしたり、同じページのフォームを送信ボタンとページの再読み込みで入力することができます。AJAXを使用するには、送信を使用して通常のフィルタフォームを変更するにはどうすればよいですか?

見つかったすべての会場が表示され、フォームが自動的にリセットされます。

さまざまなフィルタオプションをクリックするだけで、ページの再読み込みなしに会場のリストを更新する方法を教えてください。したがって、ボタンは送信されず、フォームは変更された状態を維持します。

会場コントローラ

def index 
    if 
     @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]).order("average_rating DESC").all 
    else 
     @venues = Venue.all 
    end 
    @venues = @venues.paginate :per_page => 15, :page => params[:page] 
    end 

これはすでに、より良い探して、チェックボックスには非常に多くの

<div class="filter_options_container"> 
    <%= form_tag '', :method => :get, :id => 'filter_form' do %> 

    <fieldset class="filter_form_fieldset venuetypes"> 
     <% Venuetype.all.each do |v| %> 
     <p class="venuetype_check"><%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %> 
     <label for="venuetype-<%= v.id %>"><%= v.name %></label></p> 
     <% end %> 
    </fieldset> 

    <fieldset class="filter_form_fieldset areas"> 
     <% Area.all.each do |a| %> 
     <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %> 
     <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p> 
     <% end %> 
    </fieldset> 

    <div class="filter_form_button"> 
     <p2><input type="submit" value="Filter"/></p2> 
    </div> 
    <% end %> 
</div> 

<div class="venue_partials_container"> 
    <%= render :partial => 'venue', :collection => @venues %> 
    <div class="clearall"></div> 

    <div class="paginate_container"> 
    <div class="paginate"> 
     <%= will_paginate @venues %> 
    </div> 
    </div> 
</div> 

感謝を取得するjQueryの-UIを使用しているindex.html.erb会場どんなに助けても大丈夫です!

答えて

1

これを行うには、おそらくjqueryを使用します。

最も単純なのは、フィルタがクリックされたときにフォームを自動的に送信するためにjqueryを使用することですが、まだページがリロードされていますが、訪問者は送信ボタンをクリックする必要はありません。

コードのようなものになります。

$(".checkbox-which-send-form-when-clicked").change(function(e){ 
    $(this).parents("form:first").submit(); 
}); 

jquery website

にチェックボックスがクリックされるたびに再ロードページが送信するためにAjaxリクエストを使用することであることはありません別の解決策をドキュメントを読んでください。フォームを作成し、結果を取得します。良いチュートリアルが見つかりましたhere

0

私はRubyをまったく知っていませんが、私はあなたがjQueryを使って実装する必要があるアーキテクチャを知っています。最初に、JSONをクライアントに返すエンドポイントを設定する必要があります。ユーザーがJSONエンドポイントを投稿または取得するフィルターフォームを作成、変更、または単純に提出すると、そのオプションは、各フィールドがユーザーによって変更されるたびに、または送信ボタンがクリックされたときに取得することができます。インタラクティブにどのように作成したいかは、完全にあなた次第です。

jQuery $ .ajax関数を使用してJSONを取得します。更新されたデータを取得するには、$ .postまたは$ .getのどちらかを使用することをおすすめします。 jQuery AJAX Shorthand functions

フォーム送信ボタンのクリックイベントハンドラを設定することもできます。このように見えるかもしれませんが、e.preventDefaultを使用することが重要です。これは、ページ全体がポストバックされないようにするためです。

$( "フォーム:提出"()関数(E){

e.preventDefault()をクリックしてください。

$。getJSON([あなたのAJAX URL]、[フィルタからのデータ]、関数(結果){ //テンプレートを使用したテーブルの更新 });

});

$ getJSONコールバックでは、jQueryテンプレートまたはResigのマイクロテンプレートのような他のテンプレートマージ機能を使用することをおすすめします。

私はASP.NETでこのようなことをしていることについて、一連のブログ投稿を書いています。それはあなたのためにRubyをかなりうまく翻訳するはずです。ちょうどあなたのRubyサーバ側にASP.NETのものを置き換えてください。

My Thin ASP.NET Series

関連する問題