bootstrap-colorpikcer-rails gem java script only firing on one page in Rails 4 application

Question

I'm building a rails application for creating pre-launch landing page campaigns. Each campaign has a main_page.html.erb file and a referral_page.html.erb file.

On both of these pages there are elements that you can edit. For example you can change the font, color, and text of the headline of the main_page.html.erb file and on the same for the referral_page.html.erb file.

I'm using these gems for my forms

# Color Picker
gem 'bootstrap_colorpicker_rails'
gem 'simple_form'

The form fields for changing color on the main_page.html.erb file work perfectly. when you click the hex code there is a little color picker drop down that you can select from.

My problem is that this isn't working for any of the forms on the referral_page.html.erb and I'm not seeing an error in the console.

Here's the form partial for the main_page.html.erb headline. It's a modal that pops up when you hit the edit button. I'm using twitter bootstrap and 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>

This version popsup and works fine...

Here's an example form from the referral page partials. Again, this is a popup modal. The modal pops up but when you click the color picker... nothing hapens.

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>

If you need to test this out and see what I'm saying just visit ActionPages.c Sign up for free and create a campaign. Then just try and edit the color of the headlines on the main page vrs the referral page.

The forms seem the same to me and I've even tried copying the form from the main page to the referral page to see if I had some small error in the form. The result was that the color-picker still didn't work.

So my hypothesis is that something about the javascript or style sheet for the bootstrap-colorpickr-rails gem isn't working on the referral.html.erb file...

Any ideas are welcome! Thank you.

EDIT JAVASCRIPT ON REFERRAL PAGE LOADING BUT NOT FIRING?

So I've been trying to solve this problem for over a month! I was inspecting one of the form fields on the referral page for changing the nav bar color and noticed that the JavaScript and form field are both loading correctly.

Form field screen shot

Note that the color picker isn't popping out even though I clicked on it.

JavaScript and Form field in inspector

Why would the JS show up but not actually cause the popup of the color picker?

Again, all of this works perfectly in the main_page.html.erb file...

Answer 1

The colorpicker seems to be working fine, however, you issue seems to be more CSS related.

Open the Chrome inspector and look for the <div> class="colorpicker dropdown-menu"></div> elements (should there be 5 of these?), once you've located them, click on the input field to trigger the colorpicker. You'll see that some inline styles were added to one of those divs. Click out of the input field to "hide" the colorpicker and you'll see that the colorpicker dropdown-menu div will now have a display: none style. With this you can see that the plugin IS working, however, you probably have some css that's making modal have a higher precedence z-index than the one on the colorpicker dropdown-menu div. The z-index set on that div seems to be 2500