Query database with jQuery Ajax in Rails 3

Question

I am trying to build an estimate form that supports multiple line items. After completing an estimate line item by filling in the following fields:

properties
height
letter_quantity

I would like to query a database table to get a unit price to multiply by letter_quantity and display the line item's cost. My thought is to execute the query and display the line item's cost onBlur from the letter_quantity field.

Here is my 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 %><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 %>

I would like to use the general jQuery ajax function to call a function that executes the query and returns the cost back to the form. Here is the basic template:

$.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

Most importantly, how do I setup the jQuery Ajax function to call the calculateCost function? I have been searching Google and cannot find an example of this.

Secondarily, how do a setup the query and return functionality in the calculateCost function? Any help with these questions will be greatly appreciated.

Muhammad Sannan Khalid · Accepted Answer · 2011-08-26 09:13:51Z

3

include jquery, and jquery.form plugin at top of page:

<%= 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>

in your controller do something like.

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

answered Aug 26, 2011 at 9:13

Muhammad Sannan Khalid

3,1371 gold badge24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Corey Quillen Over a year ago

This is not working. I setup the ajax function as you specified but I am getting a 404 Not Found status/response when viewing the request in Google Dev Tools.

Corey Quillen Over a year ago

I added a Collection route to map the calculateCost action and it now works. Thanks for your help!

Collectives™ on Stack Overflow

Query database with jQuery Ajax in Rails 3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related