bootstrap-colorpikcer-rails gem java腳本只在Rails 4應用程序中的一個頁面上觸發

Question

我構建了一個用於創建啓動前着陸頁廣告系列的rails應用程序。每個廣告系列都有一個main_page.html.erb文件和一個referral_page.html.erb文件。

在這兩個頁面上都有可以編輯的元素。例如，您可以更改main_page.html.erb文件標題的字體，顏色和文本，以及referral_page.html.erb文件的相同標題。

我用這些寶石爲我的形式

# Color Picker 
gem 'bootstrap_colorpicker_rails' 
gem 'simple_form' 

有關main_page.html.erb檔案工作變色完美的表單字段。當你點擊十六進制代碼時，會有一個可以從中選擇的顏色選擇器。

我的問題是，這是不工作的referral_page.html.erb上的任何形式，我沒有看到控制檯中的錯誤。

下面是main_page.html.erb標題的部分表單。這是一個當你點擊編輯按鈕時彈出的模式。我使用Twitter的引導和物質UI

炫魅/ _headline.html.erb

<div id="headlineModal" class="modal fade edit-elements" role="dialog"> 

    <div class="modal-dialog"> 

    <!-- Modal content--> 

    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"></h4> 
     </div> 

     <div class="modal-body"> 

     <%= simple_form_for @campaign, { multipart: true } do |f| %> 

      <% if @campaign.errors.any? %> 
      <div id="error_explanation"> 
       <h2><%= pluralize(@campaign.errors.count, "error") %> prohibited this page from being saved:</h2> 
       <ul> 
       <% @campaign.errors.full_messages.each do |message| %> 
       <li><%= message %></li> 
       <% end %> 
       </ul> 
      </div> 
      <% end %> 

      <div class="form-group"> 
      <%= f.label(:mpheadlinelabel, @campaign.mpheadlinelabel) %> 
      <%= f.text_field(:mpheadline, input_html: { value: @campaign.mpheadline }, class: "form-control")%> 
      </div> 
      <div class="form-group"> 
      <%= f.label(:mpsubheadlinelabel, @campaign.mpsubheadlinelabel) %><br> 
      <%= f.text_field :mpsubheadline, class: "form-control" %> 
      </div> 
      <div class="form-group"> 
      <%= f.label(:mpcolorlabel, @campaign.mpcolorlabel) %><br> 
      <%= f.input_field :mpcolor, as: :colorpicker %> 
      </div> 

      <div class="actions"> 
      <%= f.submit "Update Headline", class: "btn btn-sm btn-success" %> 
      </div> 

     <% end %> 

    </div> <!-- modal-body --> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 

    </div> 

    </div> 

</div> 

這個版本popsup和工作正常...

下面是來自轉診頁面諧音的例子形式。再次，這是一個彈出式模式。模態會彈出，但是當你點擊顏色選擇器時......沒有任何瑕疵。

referral_page/_rpheadline.html.erb

<div id="rpheadlineModal" class="modal fade edit-elements" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
    <%= simple_form_for @campaign, { multipart: true } do |f| %> 
     <%= f.hidden_field :from_referral_page, value: true %> 
     <% if f.object.errors.any? %> 
     <div id="error_explanation"> 
      <h2><%= pluralize(f.object.errors.count, "error") %> prohibited this referral page from being saved:</h2> 

      <ul> 
      <% @f.object.errors.full_messages.each do |message| %> 
      <li><%= message %></li> 
      <% end %> 
      </ul> 
     </div> 
     <% end %> 

     <div class="form-group"> 
     <%= f.label :rpheadline, "Right Headline" %><br> 
     <%= f.text_field :rpheadline, class: "form-control text-center" %> 
     </div> 
     <div class="form-group"> 
     <%= f.label :rpsub, "Top Subheadline" %><br> 
     <%= f.text_field :rpsub, class: "form-control text-center" %> 
     </div> 

     <div class="form-group"> 
     <%= f.label :rpbottomsub, "Bottom Subheadline" %><br> 
     <%= f.text_field :rpbottomsub, class: "form-control text-center" %> 
     </div> 

     <div class="form-group"> 
     <%= f.label :rpcolor, 'Top Text Color' %><br> 
     <%= f.input_field :rpcolor, as: :colorpicker %> 
    </div> 
     <div class="actions"> 
     <%= f.submit "Update", class: "btn btn-sm btn-success" %> 
     </div> 
    <% end %> 



    </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

如果你需要測試這一點，看看我說的只是參觀ActionPages.c 免費註冊並創建活動的內容。然後，只需嘗試編輯主頁上的標題顏色，然後在推薦頁面上進行編輯。

表格看起來和我一樣，我甚至嘗試將表單從主頁複製到推薦頁面，看看我是否在表單中有一些小錯誤。結果是選色器仍然沒有工作。

所以我的假設是，一些關於JavaScript或樣式表的自舉colorpickr護欄寶石不工作的referral.html.erb文件...

任何想法，歡迎！謝謝。

編輯關於引導頁面加載但不是激發的JavaScript？

所以我一直在試圖解決這個問題超過一個月！我正在檢查推薦頁面上的一個表單域，以更改導航欄顏色，並注意到JavaScript和表單域都正確加載。

表單域屏幕截圖

注意，顏色選擇器不會飛出即使我點擊它。在檢查

的JS爲什麼會出現，但實際上沒有造成顏色選擇器的彈出

JavaScript和表單域？

同樣，這一切完美的作品在main_page.html.erb文件...

Answer 1

在ColorPicker似乎是工作正常，但是，你問題似乎更CSS有關。

打開Chrome檢查器並查找<div> class="colorpicker dropdown-menu"></div>元素（應該有5個元素？），找到它們後，單擊輸入字段以觸發colorPicker。您會看到一些內聯樣式已添加到其中一個div。點擊輸入框以「隱藏」colorpicker，您將看到 div現在將具有display: none樣式。有了這個，你可以看到該插件工作，但是，你可能有一些CSS讓模態具有比 div更高的優先級z-index。該z-index集上該div似乎是2500