2016-11-15 11 views
0

レール、JavaScript、Ajaxの基本です。 JOINSを使用して3つのテーブルからデータを取得するためのrailsクエリがあります。私は日付オプションを選択してデータを取得したいと思います。私はAjaxまたはJavaScriptを実装したいと思います。続きajaxを使用して日付でレールを検索する

@query = ItemType.select("name, item_id, sum(quantity) as Total_Quantity_Itemwise, sum(price_value) as Item_Total_Amount, price_value, order_items.created_at Date").joins('INNER JOIN items ON items.item_type = item_types.id', 'INNER JOIN order_items ON order_items.item_id = items.id').group("item_id").order(" order_items.created_at") 

Click to view the result of the query

とも次の画像最初

<table border="1"> 
    <tr> 
    <th>Item Name</th> 
    <th>Quantity</th> 
    <th>Amount</th> 
    </tr> 
    <% @new_query.each do |results| %> 
    <tr> 
     <td><%= results.name %></td> 
     <td><%= results.Total_Quantity_Itemwise %></td> 
     <td><%= results.Item_Total_Amount %></td> 
    </tr> 
    <% end %> 
    <tr> 
    <th>Total of all rows</th> 
    </tr> 
    <tr> 
    <td></td> 
    </tr> 
    <tr> 
    <td><% @new_query.sum(:price_value) %></td> 
    </tr> 
</table>` 

Click here to view how total to be displayed at bottom

答えて

0

に示すように、下部に合計金額を得る私を助けレールクエリですページは内容なしで読み込まれますhtml.erbテンプレートを使用すると、divの参照としていくつかのidを持つ空のdivが作成されます。ユーザーが日付を選択し、ボタンをクリックすると

、あなたはクリックイベントに耳を傾け、

$("#button").click(function() { 
    $.ajax({ 
     url: "/calculate_price", 
     type: "GET", 
     dataType: 'script', 
     data: {date: (#date_field_selector).val()} 
    }); 
}); 

の下に表示のようなAJAX呼び出しを行うためにスクリプトを追加することができますし、日付文字列を取得することができますし、その値にアクセスして必要な変換を行い、それをクエリで使用すると、js.erbがレンダリングされ、htmlで保持していたdiv内にコンテンツを配置できます。

これを行う前に、我々は、部分的なファイルを作成する必要があり、HTML部分は、そのファイル内にあることを持って、あなたは部分的に地元の人々を送信し、合計を表示するには、変数@new_query

の代わりにそれを使用することができます一番下に配列変数を作成し、各項目の合計価格を知っているので、各項目の価格を押し続けるだけで、配列を合計して表示することができます。

関連する問題