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?

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

Answer 2

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);
    });
  });