Accessing Javascript variables in rails app

Question

I'm stuck at one task and have no idea how to move on. Any comments would be highly appreciated! (I'm very new to Javascript and jQuery).

I'm implementing the ability to mark a building on google maps during creation or editing the building (the same form for both).

So my form in .html.haml document has 2 fields for choosing a country and a city. The city field is disabled as long ad the country is not chosen. Both fields saves ids for country and city (not names!).

= select_tag 'building[country_id]', options_for_select(Country.all.map{|c| [c.name, c.id]), onchange: "getLocationObjects ($(this).val(), '#{cities_path}')"

- if building.country
  = select_tag 'building[city_id]', options_for_select(building.get_countries.cities.map{|c| [c.name, c.id]}, building.get_city.id), include_blank: "Choose city"
- else
  = select_tag 'building[city_id]', options_for_select([["Choose country", '']]), disabled: true

But for marking a building on google maps I need a city name, not id (don't say "Then save it in select tag instead of id", I need an id in other parts of an app).

So I use a jQuery to save a name of a city:

:javascript
  $(document).ready( function () {
    $('#building_city_id').change(function() {
      var option = $(this).find('option:selected').text();
      return option;
    });
  });

That's where the first problem occurs: when I edit a building that already has a country specified, a jQuery function saves a city name just fine. But if I choose another country from the list it doesn't work anymore.

Second problem: all the code for google mapping is located in .js file. So how do I call a Javascript variable created in .html.haml file here?

Let me explain it clearly, chat.stackoverflow.com/rooms/101297/adhoc — beck03076
– beck03076, Commented Jan 21, 2016 at 12:32

Max Williams · Accepted Answer · 2016-01-21 12:31:52Z

1

You need to bear in mind the architecture here: Rails/Ruby generates some text files on a server which are sent to the browser (client). The browser can then evaluate them, rendering the html and executing the javascript.

You can write javascript dynamically in Rails but it won't be executed there so you can't access the variables.

Similarly, the javascript runtime environment in the browser knows absolutely nothing about your Rails app. The only communication it can make with Rails is by sending a request to the server.

So, if you want the javascript to choose between the "has a country" options and the "no country" options, then either

a) all sets of options will need to be present on the page (but hidden initially, apart from the country select), and the javascript shows/hides them as applicable

b) when the first set of options is selected, the javascript makes an ajax call to rails to create the second dropdown, depending on which country was selected.

answered Jan 21, 2016 at 12:31

Max Williams

33k34 gold badges136 silver badges205 bronze badges

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

2 Comments

Nadiya Over a year ago

Thank you Max. But is there a way to call a Javascript variable, that was created in .html.haml file, in .js file ?

Max Williams Over a year ago

Yes, you can write javascript in your haml file. It won't be executed until it is in the browser, however: while it's in ruby it's just some text.

Nadiya · Accepted Answer · 2016-01-21 13:31:11Z

0

I added an empty hidden_field_tag for saving a building city:

= hidden_field_tag 'building[city_name]', ''

And changed the jQuery function to send a city name as a hidden_field_tag value:

1) if a city is already specified:

:javascript
  $(document).ready( function () {
    var option = $( "#building_city_id option:selected" ).text();
    $('#building_city_name').val(option);
  });

2) if a city is not specified:

:javascript
  $(document).ready( function () {
    $('#building_city_id').change(function() {
      var option = $(this).find('option:selected').text();
      $('#building_city_name').val(option);
    });
  });

answered Jan 21, 2016 at 13:31

Nadiya

1,5554 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Accessing Javascript variables in rails app

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related