javascript - bootstrap-colorpicker-rails gem javascript仅在Rails 4应用程序的一页上触发

Question

我正在构建一个 Rails 应用程序，用于创建启动前登陆页面营销事件。每个营销事件都有一个 main_page.html.erb 文件和一个 Referral_page.html.erb 文件。

这两个页​​面上都有您可以编辑的元素。例如，您可以更改 main_page.html.erb 文件标题的字体、颜色和文本，以及referral_page.html.erb 文件的标题。

我正在将这些 gem 用于我的表单

# Color Picker
gem 'bootstrap_colorpicker_rails'
gem 'simple_form'

用于更改 main_page.html.erb 文件上颜色的表单字段工作得很好。当您单击十六进制代码时，会出现一个小的颜色选择器下拉菜单，您可以从中进行选择。

我的问题是，这不适用于referral_page.html.erb 上的任何表单，并且我在控制台中没有看到错误。

这是 main_page.html.erb 标题的部分表单。这是当您点击编辑按钮时弹出的模式。我正在使用 Twitter Bootstrap 和 Material UI

mainpage/_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>

此版本弹出并且工作正常...

这是来自推荐页面部分的示例表单。同样，这是一个弹出模式。模式会弹出，但是当您单击颜色选择器时......什么也没有发生。

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免费注册并创建事件。然后尝试编辑主页与推荐页面上标题的颜色。

这些表格对我来说似乎是一样的，我什至尝试将表格从主页复制到推荐页面，看看表格中是否有一些小错误。结果是颜色选择器仍然不起作用。

所以我的假设是，有关 bootstrap-colorpickr-rails gem 的 javascript 或样式表的某些内容在referral.html.erb 文件上不起作用...

欢迎任何想法!谢谢。

在加载推荐页面时编辑 JavaScript 但未触发？

所以我已经尝试解决这个问题一个多月了!我正在检查推荐页面上的一个表单字段以更改导航栏颜色，并注意到 JavaScript 和表单字段都正确加载。

表单字段屏幕截图

请注意，即使我点击了颜色选择器，它也不会弹出。

检查器中的 JavaScript 和表单字段

为什么JS会出现但实际上并没有弹出颜色选择器？

同样，所有这些都在 main_page.html.erb 文件中完美运行...

Answer 1

颜色选择器似乎工作正常，但是，您的问题似乎与 CSS 相关。

打开 Chrome 检查器并查找 <div> class="colorpicker dropdown-menu"></div>元素(应该有 5 个吗？)，找到它们后，单击输入字段以触发颜色选择器。您会看到一些内联样式已添加到其中一个 div 中。单击输入字段以“隐藏”颜色选择器，您将看到 colorpicker dropdown-menu div 现在有一个 display: none风格。有了这个，您可以看到该插件正在工作，但是，您可能有一些 css 使模态具有更高的优先级 z-index比 colorpicker dropdown-menu 上的那个分区z-index设置在那个 div 上似乎是 2500