CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby
jcxswc
jcxswc

Reputation: 27

Using JavaScript in embedded Ruby to pass a variable as a parameter

Short story:

I am trying to pass a variable from JavaScript (specifically, jQuery) as a parameter in an embedded ruby method.

Long story:

It all begins with a function. In summary, I have date picker built via jQuery UI.

#my_budget.html.erb
<h1 class="text-center">Your Budget</h1>
<h4 class="text-center">Select Month to View</h4>
<input style="width:200px" name="startDate" id="startDate" class="date-picker form-control" placeholder="Select Month"/>

<br>
<br>

<script type="text/javascript">
  function setDateRange() {
    $('.date-picker').change(function() {
     var date = $(this).val(); 
     return date
    });
  }

  $(document).ready(setDateRange);
</script>

Further down the road, I have embedded ruby attempting to make a call to said variable (date). This value is passed via MM/YYYY format.

#my_budget.html.erb
<td class="section-value"><%= number_to_currency(@user.total_income(date)) %></td>

Here's a peek at my model.

#user.rb
# General Income
  def total_income(current_month)
    total_value = Transaction.joins(:user).where("transactions.sub_category" => '11').where("created_at = ?", current_month).sum(:amount)
    total_value
  end

For fairly obvious reasons, this does not work.

I am a junior developer in Rails and am still learning when to use Ruby versus JS for certain functions.

What is the best way to go about passing my JS variable into my embedded Ruby? Alternatively, how can I call the input value "on change" via Ruby into my function, so when a user selects "March 2017" in the date picker, Ruby says "Hey, it changed! Let's use it!" and adjusts the value accordingly.

Thank you!

Upvotes: 1

Views: 902

Answers (1)

Alexander Luna
Alexander Luna

Reputation: 5439

Simply put, Ruby runs on your server and all erb tags are evaluated by the time it reaches the client. Ex:

<%= number_to_currency(@user.total_income(date)) %>

If you attempt to change "date" with javascript you will fail because by the time javascript tries to change it, rails and your server already evaluated the method and it will return that value not the Ruby method.

Now, you have two simple options here:

  1. Write a Javascript function that does the same what your Ruby code is suppose to do.
  2. Sent an Ajax call to your server, let Rails process the request and respond with json or javascript to the client.

The first option is probably simpler and will be better for your server since it would not have to take care of extra requests.

The second option requires you to create a form and set it to remote: true. In your controller you will have to receive the content of the form, call your @user.total_income method and set the respond_to so that it return json or javascript:

@user_income = @user.total_income(params[:date)
respond_to do |format|
  format.html
  format.js
end

Then you will have to create a javascript file in your views folder and write some javascript with the info you want the user to get. Simplistically, it will look something like this:

$('#where-to-put-your-income').append('<%= j render @user_income %>');

You can read about how to use Ruby and Javascript here:

http://guides.rubyonrails.org/working_with_javascript_in_rails.html http://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to

Good luck, I'm also still a Junior Rails developer, let's do our best.

Upvotes: 1

Related Questions