1

タグ付きの作業レポートを備えたRailsアプリがあります。Report / Index.html.erbで、ユーザーがタグを選択してレポートを並べ替えられるようにします。一度に1つのタグしか選択できないので、選択ボックスが最適だと思います。私は現在これを持っています:

<%= select("preferences", :tag_with, 
 ["Politics", "Technology", "Entertainment", "Sports", "Science", "Crime", 
 "Business", "Social", "Nature", "Other"], :prompt => "Filter Feed by:" )%>

tag_with現在のタグを更新するメソッド呼び出しを備えた、動作する設定コントローラーがあります。ただし、このコードは選択ボックスのみを生成します。ユーザーがタグの1つを選択すると、設定コントローラーからtag_withメソッドが呼び出されるようにしたいと思います。

タスクを完了する一連のlink_to行を生成しましたが、本当に選択ボックスが必要です。

<%= link_to "Politics", :action => "tag_with", :tag => "Politics", :controller =>"preferences" %>
<%= link_to "Entertainment", :action => "tag_with", :tag => "Entertainment", :controller =>"preferences" %>
<%= link_to "Science", :action => "tag_with", :tag => "Science", :controller =>"preferences" %>
<%= link_to "Technology", :action => "tag_with", :tag => "Technology", :controller =>"preferences" %>

各タグについても同様です。これは正常に機能しますが、かさばり、望ましくありません。選択ボックスから同じことを行う方法はありますか?

4

1 に答える 1

1

あなたのreports.js.coffeeファイル、またはあなたが望む他のjsファイル。

jQuery ->
  $('select#preferences').change ->
    $.get 'preferences/tag_with',{ term: $('option:selected', this). val() }

または、通常のJavaScriptを使用する場合:

$(function(){
  $('select#preferences').change( function() {
    $.get('preferences/tag_with',{term: $('option:selected',this).val()});
  });
});

リンクはGETリクエストです。jQuery.change()メソッドは、誰かが変更を加えるたびに起動します。この$.getメソッドはGETリクエストをURLに送信し、データを渡すことができます(2番目の引数)。このデータはparamsハッシュになるため、上記の例では次のようになります。

params[:term] #=> the value attribute of whatever option was selected by the user

詳細については、 .change()および$ .get()のjQueryドキュメントを参照してください。


アップデート

これでページを更新するには、変更したいテーブルを部分的に抽出するのが最も簡単です。それがと呼ばれていると仮定しましょう_report.html.erb。パーシャルは次のようになります。

<div id="report">
  <%= render @report %>
</div>

*注:render @reportはの略ですrender :partial => 'report'http://guides.rubyonrails.org/layouts_and_rendering.htmlを参照してください*

プリファレンスコントローラーのtag_withオプションでは、必ず@reportオブジェクト(またはデータをパーシャルに配信している他のオブジェクト)を設定する必要があります。

次に、と呼ばれるファイルを作成し、そのviews/preferences/tag_with.js.erb中に次のようなものを入れる必要があります。

$('div#report').html('<%= escape_javascript( render @report ) %>');

これにより、レポートコンテナが新しいコンテンツで更新されます。

于 2012-04-22T22:42:50.207 に答える