Html issue code doing ajax using select2 gem

Question

After selecting an option, I use an ajax call to update the other select_tag but is generating the html code wrong (on id and values).

Tables:

|departaments|
  |id|  |name|
   1     dep1
   2     dep2
|provinces|
  |id|  |name| |departament_id|
    1    pr1      1
    2    pr2      1

Controller:

def new
  @client= Client.new
end

def province_update
  @provinces = Province.where(departament_id: params[:departament_id])
end

View new.html.erb

<script>
  $(document).ready(function() { 
    $(".search_select").select2();
  });
</script>
<script>
 $(function() {
   $('#departament_id').on('change', function() {
    $.get("province_update", {
      departament_id: $('#departament_id').val()
    }, function(e) {
       if (e)
       $("#province_id").select2().html(e);
   })
 });
});

</script>

Departament: <%= select_tag :departament_id,options_from_collection_for_select(@departaments, 'id', 'name') %>
Province: <%= select_tag :province_id) %>

Javascript province_update.rjs

$("#province_id").html('<%= j render partial: "provinces_result" %>')

Partial _provinces_result.erb

<%= select_tag :province_id,options_from_collection_for_select(@provinces, 'id', 'name')

Logs:

Started GET "/clients/province_update?departament_id=6" for 127.0.0.1 at 2016-06-22 17:03:55 -0500
  Processing by ClientsController#province_update as */*
  Parameters: {"departament_id"=>"6"}
   Province Load (0.1ms)  SELECT `provinces`.* FROM `provinces` WHERE `provinces`.`departament_id` = 6  ORDER BY name ASC
   Rendered _provinces_result.erb (2.3ms)
   Rendered client_management/clients/province_update.js.erb (9.1ms)
   Completed 200 OK in 14ms (Views: 12.5ms | ActiveRecord: 0.3ms)

Output:

<select name="province_id" id="province_id" class="select2-offscreen" title="" tabindex="-1">$("#province").html(' \n\nProvince&lt;\/label&gt; 
   <option value="\&quot;105\&quot;">pr1&lt;\/option&gt;\n</option>
   <option value="\&quot;108\&quot;">pr2&lt;\/option&gt;&lt;\/select&gt;\n')
   $("#district").html('\nDistrito&lt;\/label&gt; </option>
   <option value="\&quot;\&quot;">Select&lt;\/option&gt;&lt;\/select&gt;\n')</option>
</select>

I tried this code, but I'm still having the html issue:

 $("#province_bill").append('<%= j render partial: "provinces_bill_result" %>')

If I change this code, the dropdown won't update:

 $("#province_id").select2();

I tried this code on the controller, but it is not updating the dropdown:

def province_update
  @provinces = Province.where(departament_id: params[:departament_id])
  respond_to do |format|
    format.json { render json: @provinces }
  end
end

Answer 1

I see a few potential problems:

1. The id of your select_tag seems to be #province_id and not #province (as you have in your .rjs file). This will mean that the partial is rendered (as you see in your logs) to the .rjs file, but then that code isn't used as there isn't a #province element in your html.
2. If the new select_tag is correctly rendered to the html, select2 doesn't automatically know to update. You would need to tell it to by saying $("#province_id").select2(); in your .rjs after the first line. This might cause two forms to render, but I'm not sure.