2011-08-26 4 views
2

複数の広告申込情報をサポートする見積もりフォームを作成しようとしています。次のフィールドに充填することにより、推定行項目を完了した後:Rails 3のjQuery Ajaxを使用したクエリデータベース

  • 性質
  • 高さ
  • letter_quantity

私が掛けるために単価を取得するには、データベースのテーブルを照会したいと思いますletter_quantityに変更し、広告申込情報の費用を表示します。私の考えは、クエリを実行し、letter_quantityフィールドから広告申込情報の費用onBlurを表示することです。

は、ここに私のフォームです:

<%= nested_form_for @estimate do |f| %> 

    <%= f.label :date %><br /> 
    <%= f.text_field :date %><br /> 
    <%= f.label :job_name %><br /> 
    <%= f.text_field :job_name %><br /> 

    <%= f.fields_for :items do |builder| %> 
     <%= builder.label :properties %><br /> 
     <%= builder.text_field :properties %><br /> 
     <%= builder.label :height %><br /> 
     <%= builder.text_field :height %><br /> 
     <%= builder.label :letter_quantity %><br /> 
     <%= builder.text_field :letter_quantity %><br /> 
     <%= builder.link_to_remove "Remove this item" %> 
    <% end %> 
    <%= f.link_to_add "Add a item", :items %> 
<%= f.submit "Add item" %> 

<% end %> 

私は、クエリを実行し、バックの形にコストを返す関数を呼び出すために、一般的なjQueryのAJAX機能を使用したいと思います。

$.ajax({ 
    url: "test.html", 
    context: document.body, 
    success: function(){ 
    $(this).addClass("done"); 
    } 
}); 

class ItemsController < ApplicationController 

    def calculateCost 
     #Execute SQL query here 
      SELECT unit_price 
      FROM CostData 
      WHERE properties = form.properties 
      AND height = form.height 

     #Return unit_price x form.letter_quantity to form 
    end 

end 

最も重要なのは、calculateCost関数を呼び出すようにjQuery Ajax関数を設定するにはどうすればよいですか?私はGoogleを検索しており、その例を見つけることはできません。

第2に、calculateCost関数のクエリと戻り値の設定はどのように設定しますか?これらの質問のお手伝いをさせていただきます。

答えて

3

jqueryの含めると、ページの上部にjquery.formプラグイン:あなたのコントローラで

<%= javascript_include_tag "jquery-1.6.2.min.js", "jquery.form" %> 


<%= nested_form_for @estimate do |f| %> 

    <%= f.label :date %><br /> 
    <%= f.text_field :date %><br /> 
    <%= f.label :job_name %><br /> 
    <%= f.text_field :job_name %><br /> 

    <%= f.fields_for :items do |builder| %> 
     <%= builder.label :properties %><br /> 
     <%= builder.text_field :properties, :id => "properties_field" %><br /> 
     <%= builder.label :height %><br /> 
     <%= builder.text_field :height, :id => "height_field" %><br /> 
     <%= builder.label :letter_quantity %><br /> 
     <%= builder.text_field :letter_quantity, :id => "letter_quantity_field" %><br /> 
     <%= builder.link_to_remove "Remove this item" %> 
    <% end %> 
    <%= f.link_to_add "Add a item", :items %> 
    <%= f.submit "Add item" %> 

<% end %> 

<script type="text/javascript"> 
    $("#letter_quantity_field").onBlur(function() { 
     var height = $("#height_field").val(); 
     var properties = $("#properties_field").val(); 
     $.ajax({ 
      url: '/items/calculateCost?height=' + height + '&properties=' + properties , type: 'get', dataType: 'html', 
      processData: false, 
      success: function(data) { 
       if (data == "record_not_found") { 
        alert("Record not found"); 
       } 
       else { 
        $("#letter_quantity_field").val(data); 
       } 
      } 
     }); 
    }); 
</script> 

のような何かを行います。

def calculateCost 
    @cost_data = CostData.find_by_properties_and_find_by_height(params[:properties], params[:height]) 
    if @cost_data.blank? 
     render :text => "record_not_found" 
    else 
     render :text => @cost_data.unit_price 
    end 
    end 
+0

これは機能しません。指定したとおりにajax関数を設定しましたが、Google Dev Toolsでリクエストを表示しているときに404 Not Foundステータス/応答が表示されています。 –

+1

calculateCostアクションをマップするCollectionルートを追加しました。これで動作します。ご協力いただきありがとうございます! –

関連する問題