2016-04-15 17 views
0

ビュー内の単純なHTMLフォーム。ユーザーが選択したフォームの値が、ユーザーが切り替えたときにアクティブレコードのクエリに渡す必要があります。 (恐らく非同期ではないので、おそらくparamsではないでしょうか?)JS変数をRailsに非同期で送信する方法

以下の例では、business_idをフォームの値にする必要があります。あなたは私が後でリソースにそれをリファクタリングを扱うますジャバスクリプト、ページ内のいくつかを提供することができますので、もし、レールに新...

<select name="clients"> 
    <option value="1">Tesla</option> 
    <option value="4">Chevy</option> 
</select> 

<table> 
    <% @clients.where(month_year:'2015-02',business_id:'NEED VALUE OF HTML FORM HERE').find_each do |client| %> 
    <tr> 
     <td><%= client.month_year %></td> 
     <td><%= client.business_id %></td> 
     <td><%= client.bill_charge %></td> 
    </tr> 
    <% end %> 
</table> 
+2

ページがレンダリングされる前にRubyが処理され、ユーザーアクションがその後に来るので、そこにHTML値を入れることはできません。選択を送信して結果を返すには、AJAXを使用する必要があります。 – RichardAE

答えて

0

答え、ここに(おそらく)過度に簡略化された模擬があります。

クライアントビュー ここでは、部分的に指し示すrenderを呼び出す必要があります。この部分データにはテーブルデータが含まれます(後で再開できるようになります)。また、jqueryがクライアントデータの非同期フェッチを簡単に行うことができるクラスをselectステートメントに与える必要があります。

# app/views/clients/index.html.erb 
<%= select_tag "business", options_from_collection_for_select(Business.all, "id", "name"), class: "car-select" %> 

<div class="clients-table"> 
    <%= render "table_list" %> 
</div> 

あなただけのインデックスビューを切り出しテーブルで 部分的な表には、部分的

# app/views/clients/_table_list.html.erb 
<table> 
    <thead> 
    <tr> 
     <th>Month year</th> 
     <th>Business</th> 
     <th>Bill charge</th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @clients.each do |client| %> 
     <tr> 
     <td><%= client.month_year %></td> 
     <td><%= client.business.try(:name) %></td> 
     <td><%= client.bill_charge %></td> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

AJAXスクリプト これに貼り付ける必要があります変更を監視してクライアントデータの要求を提出する必要があります

​​

企業コントローラのプロセスを使用すると、URLに呼び出しているあなたのAjaxリクエストで を要求するような、「http://yourapp.com/businesses/23」、本当にあなたのビジネスコントローラのshowアクションを当たります。完全にRESTfulで、ルートを変更する必要がないため、この方法で実行する必要があります。しかし、クライアントのインスタンス変数を提供するアクションを編集する必要があります。

# app/controllers/businesses_controller.rb 
def show 
    @business = Business.find(params[:id]) 
    @clients = @business.clients (this assumes that you already have a proper has_many/belongs_to relationship between business and client) 
    respond_to do |format| 
    format.html 
    format.js 
    end 
end 

UJSビュー パズルの最後のピースは、UJS図です。これは、js要求タイプが特定のコントローラアクションに送信されたときにのみ呼び出されるjavascriptです。この場合、ビジネスコントローラのshowアクション。これは新しく作成された@clientsを取り、既存のテーブルを部分データと新しいデータに置き換えます。

#app/views/businesses/show.js.erb 
$(".clients-table").html("<%= escape_javascript(render('/clients/table_list', client: @clients)) %>"); 

さらに複雑なことや質問が残っている場合は、UJSテンプレートとコールバックについて少し研究してください。

+0

うわ..すべての選択値を渡す..私はすでにnode.jsを逃しているが、レールを使用する必要があります...グレート答えbtw – HoosierCoder

+0

しかし、あなたは選択値を渡すだけではありません。あなたはまた、オブジェクトのリストをサーバに問い合わせています。そして、何かがそのリターンを処理しなければなりません。あなたはjsコールバックとujsパートのすべてでそれを行い、JSONとして処理してjsonを取り出し、テーブルを更新することができます。 – trh

+0

そのnode.jsはおいしいものではありません:) – trh

0
  • は部分的にあなたの結果テーブルを置きます。
  • 他に言えば、選択
  • の変更に関するイベントのAJAXリクエストは、リクエスト変数( `@clients')として渡した選択の値に基づいてテーブルをレンダリング火
関連する問題