How to do an jQuery ajax call from a numberfield using Rails

问题

I am doing a fixeddeposit project, in which I am having three models:

1)fixeddeposit 2)interestrate 3)interestsetup

When I open a fixeddeposit, I have to type the number of days(365/730/1095/1460 & 1825) from number_field. Then in another text box I want to update the rate_of_interest based upon the number(365/730/1095/1460 & 1825) I typed.

Rate_of_interest should be taken from rate which is in the interestrates table field. Kindly see the screenshot of my interestrates table below.

Interestrates table

Example:

If i type number 365 in fixeddeposit form(which is number_field). It automatically select rate 9.5% from interestrates table using AJAX function.

And, if a customer age is above 58, and i type number 365 in fixeddeposit form. It automatically select (rate 9.5% + senior increment 0.5% ) = 10.0% from interestrates table using AJAX function.

Screenshot of FD

I googled it for a solution but, results showing with collection_select alone. I want to do the same in number_field. Though, i am new to Ruby on Rails and AJAX i am struggling with it.

回答1:

Lets go through the steps of ajax in rails

a. Create a route for your custom action, since we want to send data so it'll be post request

post "/rate" => "your_controller#calculate_rate" , as: "calculate_rate"

b. Write a javascript code that will listen to your periods input field.

$(document).on("change","#id_of_periods_input",function(){
  var periods = $(this).val();
  var age = $("#id_of_age_input").val();
  $.ajax({
    type: "POST",
    url: "/rate",
    data: { periods: periods, age: age } //this will enable you to use params[:periods] and params[:age] in your controller
  });
});

This will work but i think it'll be better if you have some sort of button and when user clicks on it then calculate your rate of interest because if you'll use on change event then then lets say your periods value is 365 so your ajax call will fire 3 times( first time when you enter 3 then for 6 and then for 5)

If you want to use button then also you have to use same logic only this line will change

$(document).on("click","#id_of_btn",function(){
  // same logic
});

c. Getting your data in controller and performing your logic

def calculate_rate
  @periods = params[:periods]
  @age = params[:age]
  // perform your logic here and store rates value in lets say @rate
  respond_to do |format|
    format.js{}  #this will make rails look for a file named calculate_rate.js.erb in your views
  end
end

d. Filling rates input field by writing js in calculate_rate.js.erb

$("#id_of_rate_field").val(@rate);

回答2:

I see that the rate is dependent on Time Period and Date of Birth. So, one way to do it is to attach an event listener to the two input fields. So let's say, dob input field has id = dob, you can write simple jQuery to attach a listener like $("#dob").change()....

Now, inside the listener function, you update the value of Rate of Interest based on the values of Time Period and DOB. For this, you could write the ROI logic in the code or send an ajax request to Rails app and get Interest Rate from there.

来源：https://stackoverflow.com/questions/24752435/how-to-do-an-jquery-ajax-call-from-a-numberfield-using-rails

标签

javascript

jquery

ruby-on-rails

ajax

textfield