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