過濾結果下拉菜單不能使用Rails Bootstrap表單GEM

我正在這樣做來提高我的RoR技能。我正在嘗試創建一個我創建的表單。這是我原來的表單代碼。過濾結果下拉菜單不能使用Rails Bootstrap表單GEM

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

使用者在爲了選擇Model選擇Manufacturer第一。 Model將根據Manufacturer進行過濾。這是我用來激活該動作的腳本。它完美的作品。

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

現在，我試圖設置窗體和下拉菜單的樣式。我正在使用bootstrap_form寶石讓我的生活更輕鬆。爲了使用寶石，我必須更改表格以使用寶石，我將表單的代碼更改爲下面的代碼。

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

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

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

    <div class="field"> 
     <%= f.collection_select :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 %>

該窗體看起來很漂亮，並且在提交後生成視圖時起作用。但是，我發現過濾器選項不再有效。在選擇Manufacturer之前，用戶可以選擇Model。我確實嘗試了bundle install並重新啓動我的Rails服務器以嘗試使其工作。

我的問題是bootstrap_form寶石與基於製造商過濾模型的腳本一起工作嗎？有沒有其他方法可以植入我的腳本以使用引導CSS？

更多信息：這就是我對application.js

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

我已經添加下面的圖片來說明我的意思。

來源

2016-07-24 Melvin Ch' ng

在您將表單應用到引導之後，是否存在id＃tint_model_id？你可以通過查看生成的html標籤來確認它嗎？ – sahil

不是，它從'tint_model_id'變爲'_model_id' –

由於id已被更改，您的jquery不再有效。保留之前的集合，刪除'f.'，因爲您使用的是form_tag，這沒有什麼區別。 – sahil

看起來像Bootstrap在使用bootstrap_form創業板時更改了ID。正確的腳本如下所示。

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

來源

2016-07-24 05:03:57

過濾結果下拉菜單不能使用Rails Bootstrap表單GEM

回答

相關問題