CODEWITHSUNDEEP
jqueryajaxruby-on-rails-4select
svelandiag
svelandiag

Reputation: 4320

Rails: Prepopulate Ajax select in edit form

I have a form of a model, the form has 2 selects, one is for State and the other is for City, of course the City select is filled using ajax when you select a state, Im having problems when showing the selected values in edit form, this is the form:

#Im just showing you the section where the selects are.
<div class="small-4 columns state-select">
        <%= f.label :state, 'Departamento' %>
        <%= f.select :state, options_for_select(states_with_default.collect { |key, value|
            [value.titleize, key] }, f.object.state) %>
    </div>
    <div class="small-4 columns city-select">
        <%= f.label :city, 'Ciudad' %>
        <%= f.select :city, options_for_select([], 0) %>
    </div>

I have this coffee script code that updates the cities select when a state is selected and also when the page loads it looks for all the state selects (they can be 1 or more it is a nested form) and updates the cities for each state select:

$ ->
  updateCitiesOferts = ($state_input) ->
    console.log $state_input
    $input_city = $state_input.parents().first().next().find('select')
    $.getJSON('/cities/' + $state_input.val(), (data) ->
      $input_city.empty()
      if not $.inArray('orders', window.location.pathname.split( '/' ))
        all_cities_option = '<option value="all">Todo el departamento</select>'
        $input_city.append all_cities_option
      for i in data
        opt = "<option value=\"#{i}\">#{i}</option>"
        $input_city.append opt
    )
  $(document).on 'change', '.state-select select', ->
    updateCitiesOferts $(@)

  for state_input in $('.state-select select')
    updateCitiesOferts $(state_input)

Well this code works ok, however when I go to the edit page the cities select is updated with the last selected state but I do not know how to get the selected city from the model =/, I need to show the selected state and also the selected city. So far it loads the list of cities for the last selected state but does not detect the selected city from the model, how to do this?

Update

Well as you requested here is a visualization of what I say above.

Actual result

Expected result

Note: 'Seleccionar' is the default option, it is equivalent to "-Select-" in english.

Upvotes: 4

Views: 645

Answers (1)

Long Nguyen
Long Nguyen

Reputation: 11275

In your form:

#Im just showing you the section where the selects are.
<div class="small-4 columns state-select">
        <%= f.label :state, 'Departamento' %>
        <%= f.select :state, options_for_select(states_with_default.collect { |key, value|
            [value.titleize, key] }, f.object.state) %>
</div>
<div class="small-4 columns city-select">
    <%= f.label :city, 'Ciudad' %>
    <%= f.select :city, options_for_select([], 0), {}, { "data-selected" => f.object.city } %>
</div>

Now the select of city will have attribute data-selected="YOUR_SELECTED_VALUE"

Update your coffeescript:

$ ->
  updateCitiesOferts = ($state_input) ->
    console.log $state_input
    $input_city = $state_input.parents().first().next().find('select')
    $.getJSON('/cities/' + $state_input.val(), (data) ->
      $input_city.empty()
      if not $.inArray('orders', window.location.pathname.split( '/' ))
        all_cities_option = '<option value="all">Todo el departamento</select>'
        $input_city.append all_cities_option
      for i in data
        opt = if i == $input_city.data("selected")
          "<option value=\"#{i}\" selected=\"selected\">#{i}</option>"
        else
          "<option value=\"#{i}\">#{i}</option>"
        $input_city.append opt
    )
  $(document).on 'change', '.state-select select', ->
    updateCitiesOferts $(@)

  for state_input in $('.state-select select')
    updateCitiesOferts $(state_input)

Update

Fixed syntax error in the select_tag of city

Upvotes: 4

Related Questions