Forms with Select2 are duplicated when clicking back button on browser in Rails 5

Question

_header.html.erb (for forms part)

<%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %>
<div class="form-group" style="display:inline;">
 <div class="input-group input-group-md">
 <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %>
 <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %>
 <%if logged_in? %>
  <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %>
 <% else %>
  <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %>
 <% end %>
  <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span>
 </div>
</div>
<% end %>

JS codes

<script>
 $( document ).on('turbolinks:load', function() {
    $('select#category').select2({ 
        width: '60%', 
        dropdownAutoWidth : true, 
        placeholder: "Choose a category",
        maximumSelectionLength: 3
    }); 
    $('select#location').select2({
        width: '40%', 
        dropdownAutoWidth : true, 
        minimumResultsForSearch: Infinity
    });
 });

</script>

Glitch or rendering issues (click links to view the images)

normal

after I click back button from the browser

Can someone help me out why? Plus, my search forms are in the navigation bar in header partial file.

If I get rid of $(...).select in the script, everything works fine... I think there is a problem with select.js

Answer 1

isn't clearing the cache all the time makes using turbolinks practically pointless?

how about something like this instead?

$(document).on('turbolinks:before-cache', function(e) {
  return $('.form-control.select2').each(function() {
    return $(this).select2('destroy');
  });
});

Answer 2

I wasn't able to solve this rendering issue (still waiting for the correct answer!) but if anyone has a similar problem like me, try thinking outside of box. Here is my hack: I added a back button in my applicaiton.

Get the full url path

# get the previous url 
def save_previous_page
    session[:return_to] = request.fullpath
end

Show the back button only if the page is NOT home page or search page

<% if session[:return_to] != request.fullpath%>
   <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%>
     <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
   <%end%>
<% end %>

Meanwhile, I am still waiting and trying to fix rendering issue...

FIXED THE ISSUE

Simply add this code in your .js file

Turbolinks.clearCache();

Answer 3

This is most likely to be some asset inconsistency, you should check your app\views\layouts folder for files with duplicated declarations of wither jQuery, jQuery UJS or Turbolinks. Check all <script> tags of your pages, and if you are declaring both on layout folder and in internal views the same scripts. If that is not the case, check for render, yield or build calls

Answer 4

Simple solution, don't run the select2 builder on stuff you would rather it not run on.

$("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2();