select2の宝石を使ってAJAXを実行するHtmlコードの問題

Question

オプションを選択した後、select_tagを更新するためにajaxコールを使用しますが、idと値で間違ったhtmlコードを生成しています。

テーブル：

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

コントローラー：

def new 
    @client= Client.new 
end 

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

ビュー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" %>') 

部分_provinces_result.erb

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

ログ：

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) 

出力：

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

私はこのコードを試してみましたが、私はまだHTMLを抱えています問題：

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

私はこのコードを変更する場合は、ドロップダウンが更新されません。

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

を私は、コントローラ上でこのコードを試してみましたが、それはドロップダウンを更新していない：

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

Answer 1

いくつかの潜在的な問題があります。

1. のIDは#province_idで、#provinceではありません（お客様の.rjsファイルに記載されています）。これは部分的に（ログに表示されているように）.rjsファイルにレンダリングされますが、htmlに#province要素がないため、そのコードは使用されません。
2. 新しいselect_tagが正しくhtmlにレンダリングされた場合、select2は更新を自動的には認識しません。最初の行の後に.rjsに$("#province_id").select2();と言う必要があります。このは2つのフォームをレンダリングさせる可能性がありますが、わかりません。