jQuery (document).on not working in production Rails 5

Question

I'm currently developing a simple star rating system using jquery on Rails 5. It is working perfectly in development but not production.

However, when I include config.assets.debug = true in /config/production.rb, then it is working. One of the reason that I suspect why it behaves this way is because the precompile application.js somehow had made the jQuery (document).on not working. I had been stucked with this for a few days now, and not be able to find any solution online.

Just wondering, is it possible that there are conflict in the application.js? Is there a need for me to jQuery.noConflict() function?

Appreciate you help on this. Below is all the related code for reference.

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap/js/bootstrap.bundle
//= require activestorage
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require turbolinks-compatibility

// Start for AGENCY
//= require js_agency/jqBootstrapValidation
//= require js_agency/contact_me
//= require js_agency/agency.min
// End for AGENCY

//START FOR ADMIN
//= require jquery_sb-admin/jquery
//= require jquery-easing_sb-admin/jquery.easing
//= require chart.js/Chart.min
//= require datatables/jquery.dataTables
//= require datatables/dataTables.bootstrap4
//= require js_sb-admin/sb-admin.min
//= require js_sb-admin/demo/datatables-demo
//= require js_sb-admin/demo/chart-area-demo
//END FOR ADMIN
//= require_self
//= require_tree .


$(document).on('turbolinks:load',function(){
    $('.rating-star').click(function(){
        var star = $(this);
        var data_form = $(this).attr('data-form');
        var data_field = $(this).attr('data-field');
        var stars = $(this).attr('data-stars');

        for (i=1;i<=5;i++){
            if(i <= stars){
                $('#' + 'rating' + '_' + data_form + '_' + i).removeClass('glyphicon glyphicon-star-empty');
                $('#' + 'rating' + '_' + data_form + '_' + i).addClass('glyphicon glyphicon-star');
            } else {
                $('#' + 'rating' + '_' + data_form + '_' + i).removeClass('glyphicon glyphicon-star');
                $('#' + 'rating' + '_' + data_form + '_' + i).addClass('glyphicon glyphicon-star-empty');
            }
        }
        $('#' + data_field).val(stars);
        $('#' + 'feedback').val(stars);
    });
});

/views/star/star_rating.html.erb

<div class="col-md-12">
  <% data_form = "Taska_try" %>
  <% data_field = "taska_rating" %> <!--the field for the stars -->
    <% (1..5).each do |i| %>
      <h1 id="rating_<%= data_form %>_<%= i %>" 
          data-form="<%= data_form %>" 
          data-stars="<%= i %>" 
          data-field="<%= data_field %>"
          class="rating-star glyphicon glyphicon-star-empty">
      </h1>
    <% end %>    
</div>

<div class="col-md-12">
  <% data_form = "Classroom_try" %>
  <% data_field = "classroom_rating" %> <!--the field for the stars -->
    <% (1..5).each do |i| %>
      <h1 id="rating_<%= data_form %>_<%= i %>" 
          data-form="<%= data_form %>" 
          data-stars="<%= i %>" 
          data-field="<%= data_field %>"
          class="rating-star glyphicon glyphicon-star-empty">
      </h1>
    <% end %>
</div>

Bhojendra Rauniyar · Answer 1 · 2018-11-17T03:00:49.657

0

I don't see anywhere you're triggering custom event turbolinks:load. So, I guess you need just:

$(document).on('load'

Instead of:

$(document).on('turbolinks:load'

Or, if you wish you can trigger the custom event somewhere:

var turbolinks = jQuery.Event('turbolinks:load');
$(document).trigger(turbolinks);

Or simply trigger like:

$(document).trigger('turbolinks:load');

edited Nov 17 '18 at 03:00

answered Nov 17 '18 at 02:55

Bhojendra Rauniyar

83,432
35
168
231

`turbolinks:load` event is called on page load: https://stackoverflow.com/a/36110790/407213 – Dorian Nov 17 '18 at 04:29
Hi @Bhojendra Rauniyar, thanks for the feedback. I have tried all you suggestions above, and somehow it doesnt work in development as well. My previous code {$(document).on('turbolinks:load',function(){} work in development, not in production. – Mus KidCare Nov 17 '18 at 06:26
Just wondering, is it possible that there are conflict in the `application.js`? Is there a need for me to `jQuery.noConflict()` function? – Mus KidCare Nov 17 '18 at 06:41
In a Rails 5 project with Turbolinks installed $(document).on('load' does not work all the time because of Turbolinks. This only works on when the app is initially loaded. After that Turbolinks takes over and you would be better of using $(document).on('turbolinks:load'. – Smek Nov 17 '18 at 08:50
Correct. I'm currently using `turbolinks:load` and it works perfectly in development. It stop to work in production. – Mus KidCare Nov 17 '18 at 08:57

jQuery (document).on not working in production Rails 5

1 Answers1