How to use Ruby in a Javascript function?

Question

I realize this is not possible in the way my question is worded, but is there a way to still get the outcome I'm looking for.

In a Rails 3.2 app I have a form with City and Location fields:

<%= f.select :city, City.all, :prompt => "Select..." %>
<%= f.input :location_name, :input_html => {    data:{ autocomplete_source: Location.order(:name).map(&:name) } } %>

The location field uses Twitter Bootstrap's typeahead function to display an autocomplete list of entries.

A Location belongs to a City. I want to filter the list of autocomplete entries based on the City value selected by the user.

Basically, I need to dynamically change

... autocomplete_source: Location.order(:name).map(&:name) ...

to

... autocomplete_source: Location.where('city_id => ?', '@myform.city.id').order(:name).map(&:name) ...

In coffeescript I could do something like:

jQuery -> 
  $('#myform_city_id').change ->
    $('#myform_location_name').attr('data-autocomplete-source','#{Location.where(city_id: @myform.city_id).order(:name).map(&:name)}')

But the active record query is not called, it simply gets passed in as a string.

What is the best way to dynamically change this autocomplete-source attribute with the new query?

YuriAlbuquerque · Accepted Answer · 2012-07-02 15:49:00Z

1

You can't do this because Javascript is on the client side, Ruby is running on the server side. The Javascript does not "see" Ruby, because of this (ERB is a little different: it is transformed into a HTML before the client receives it). I recommend you to do this through an Ajax solicitation.

Explaining better: you make an action from a controller that gives you a JSON representation of what you want (it could be even a existing controller, but send it as a JSON). You call this controller via Ajax (using :remote => true on your link). You bind the ajax:complete response event from that link to a function, like this:

$("#link_id").bind "ajax:complete", (e, xhr, settings) ->
    #TODO function body goes here

Or this:

$("#link_id").bind "ajax:complete", functionName

Inside of this function you parse the JSON with jQuery.parseJSON(xhr.responseText) and do what you want with this data. It seems complicated, but in fact it is simple.

edited Jul 2, 2012 at 15:49

answered Jun 30, 2012 at 16:13

YuriAlbuquerque

2,2551 gold badge13 silver badges19 bronze badges

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

9 Comments

Andy Harvey Over a year ago

thanks @yuri, I've been playing with this for a few days, an dit looks promising, but with my limited javascript skills its still not clear to me how to put this all together. Could you provide an example using the code in my question? what I'm struggling with is how to detect whether a city_id value has been set, and to apply one of the two queries accoordingly

YuriAlbuquerque Over a year ago

I'll make a tutorial for you and post the link later. But you should study Ajax and Javascript soon. These are fundamental knowledges for web developers. ;)

YuriAlbuquerque Over a year ago

Here it is your tutorial. Your server must send the data you need, and you'll handle this data on your Javascript.

Andy Harvey Over a year ago

Hi Yuri, thanks for the great tutorial. Sorry, I think wasn't clear. I understand how to create an ajax request, what I don't understand is how to fit this in to my situation. First, I', not using a link, so the request would have to be triggered by the city select field. Second, the location field will need access to two json strings depending whether a city has been selected or not. The trigger will therefore need to pass a parameter to the controller, which contains a conditional statement. While I can see how this could be done with a link, I can't see how to connect the select field.

YuriAlbuquerque Over a year ago

Just make a controller action that gives to you as a result Location.where(city_id: @myform.city_id).order(:name).map(&:name), and work through it via Javascript.

|

Angelo · Accepted Answer · 2012-07-21 06:00:37Z

0

Rename your coffeescript from filename.js.coffee to filename.js.coffee.erb. Then you can do something like this:

jQuery -> 
  $('#myform_city_id').change ->
    $('#myform_location_name').attr('data-autocomplete-source','<%= Location.where(city_id: @myform.city_id).order(:name).map(&:name) %>')

answered Jul 21, 2012 at 6:00

Angelo

4923 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to use Ruby in a Javascript function?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related