Some functions are not working after reloading page in rails

Question

I have a navigation bar and sidebar. In the navigation bar, I have a search box, sidebar minimize button, dropdown box for profile, and logout.

In the side bar I have home, about, orders,and contact us.

My rot page is home. Upon loading the root page, some images are not displaying. It displays after clicking the home link in the side bar. The same thing happens for the drop down list, and is also not working after reloading the page. I am also using jquery plugins.

//= require jquery  
//= require jquery_ujs  
//= require turbolinks  
//= require_tree .

Please help me with what code I need to add to solve my problem. I am new to rails, thanks.
Update

<div class="table-responsive">
                            <table class="table table-actions-bar m-b-0">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>product Name</th>
                                        <th>product status</th>
                                        <th style="min-width: 80px;">Manage</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% i =0 %>
                                    <% @products.each do |products| %>
                                    <% if i == 0 %>
                                    <tr>
                                        <td><span data-plugin="peity-bar" data-colors="#5fbeaa,#5fbeaa" data-width="80" data-height="30">5,3,9,6,5,9,7,3,5,2</span></td>
                                        <td><img src="assets/products/iphone.jpg" class="thumb-sm pull-left m-r-10" alt=""> <%= product['productname'] %> </td>
                                        <% if product['status'] != "buy" %>
                                        <td><span class="text-custom"><%= product['status'] %></span></td>
                                        <% else %>
                                        <td><span class="text-danger"><%= produt['status'] %></span></td>
                                        <% end %>
                                        <td>
                                          <a href="#" class="table-action-btn"><i class="md md-edit"></i></a>
                                          <a href="#" class="table-action-btn"><i class="md md-close"></i></a>
                                      </td>
                                  </tr>  

this is for graph according to data..

Answer 1

This is most likely happening because you haven't wrapped your js scripts in a $(document).ready call. You can add turbolinks back to your application.js file and then wrap all of your js scripts in a page:load call as follows:

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

The page:load will fire when only part of your app is fetched due to turbolinks.

If you have RAILS 5 you can do:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Answer 2

Have you tried using the jquery.turbolinks gem first?

jQuery-turbolinks

It's tailored to Turbolinks 3 or lower, but you can download the Turbolinks 5 shim and put that in your if you've already made the jump to 5.

Turbolinks compatibility shim