Filter Ergebnis Drop-Down-Menü funktioniert nicht mit Rails Bootstrap Forms GEM

Question

Ich mache dies, um meine RoR-Fähigkeiten zu verbessern. Ich versuche ein Formular zu gestalten, das ich erstellt habe. Dies ist mein ursprünglicher Code für das Formular.

<%= form_tag('/quotation/tints/generate') do %> 
    <%= label :manufacturer_id, 'Manufacturer' %> 
    <div class="field"> 
     <%= collection_select(:tint, :manufacturer_id, Manufacturer.order(:name), :id, :name, {:prompt => "Select Manufacturer" }) %> 
    </div> 

    Model: 
    <div class="field"> 
     <%= grouped_collection_select(:tint, :model_id, Manufacturer.order(:name), :models, :name, :id, :name, {:prompt => "Select Model"}) %> 
    </div> 

    <%= label :price_front, 'Front Tint' %> 
    <div class="field"> 
     <%= collection_select(:price, :price_front, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Front Tint"}) %> 
    </div> 

    <%= label :price_rear, 'Size and Back Tint' %> 
    <div class="field"> 
     <%= collection_select(:price, :price_rear, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Side & Rear Tint"}) %> 
    </div> 
    <div class="form-group"> 
     <%= submit_tag 'Submit', class: "button btn btn-primary" %> 
    </div> 
<% end %> 

Benutzer hat Manufacturer zuerst wählen, um die Model auszuwählen. Die Model wird basierend auf der Manufacturer gefiltert werden. Dies ist das Skript, mit dem ich die Aktion aktiviere. Es funktioniert perfekt.

jQuery -> 
    $('#tint_model_id').parent().hide() 
    models = $('#tint_model_id').html() 
    $('#tint_manufacturer_id').change -> 
     manufacturer = $('#tint_manufacturer_id :selected').text() 
     options = $(models).filter("optgroup[label='#{manufacturer}']").html() 
     if options 
      $('#tint_model_id').html(options) 
      $('#tint_model_id').parent().show() 
     else 
      $('#tint_model_id').empty() 
      $('#tint_model_id').parent().hide() 

Jetzt versuche ich, das Formular und das Dropdown-Menü zu stylen. Ich verwende bootstrap_form Edelstein, um mein Leben einfacher zu machen. Um den Edelstein zu verwenden, muss ich das Formular ändern, um mit dem Edelstein zu arbeiten. Ich habe meinen Code des Formulars in den folgenden Code geändert.

Das Formular sieht wunderschön aus und funktioniert wie beim Generieren einer Ansicht, nachdem es gesendet wurde. Ich habe jedoch herausgefunden, dass die Filteroption nicht mehr funktioniert. Der Benutzer kann Model auswählen, bevor er Manufacturer auswählt. Ich habe versucht, bundle install und starten Sie meinen Rails Server zu versuchen, es funktioniert zu bekommen.

Meine Frage ist funktioniert bootstrap_form Edelstein arbeitet mit dem Skript, das das Modell basierend auf dem Hersteller filtern? Gibt es eine andere Möglichkeit, wie ich mein Skript mit dem Bootstrap CSS integrieren kann?

Weitere Informationen: Das ist, was ich habe für application.js

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require_tree . 
//= require bootstrap 

ich ein Bild unten hinzugefügt haben, zu zeigen, was ich meine.

Answer 1

Sieht aus wie der Bootstrap die ID geändert, wenn ich bootstrap_form GEM verwenden. Korrektes Skript unten gezeigt.

jQuery -> 
    $('#_model_id').parent().hide() 
    models = $('#_model_id').html() 
    $('#_manufacturer_id').change -> 
     manufacturer = $('#_manufacturer_id :selected').text() 
     options = $(models).filter("optgroup[label='#{manufacturer}']").html() 
     if options 
      $('#_model_id').html(options) 
      $('#_model_id').parent().show() 
     else 
      $('#_model_id').empty() 
      $('#_model_id').parent().hide()