Ajax refresh in other tab unbinds selectize element from edit form Rails 5

I have a Rails 5.1 app with multiple views. The main view is the calls index view in which I do an ajax refresh of the partials and use a callback to re-initialize the selectize JS element in my calls/index view like so:

<h4>All Calls</h4>
<%= form_tag calls_path, :method => 'get' do %>
  <%= select_tag "region", options_from_collection_for_select(Region.all, :id, :name, selected: @region), prompt: "All Regions" %>
  <%= submit_tag "Select Region", :name => nil, :class => 'btn btn-sm btn-info' %>
<% end %>
<hr>
<div id="active">
  <%= render "assigned" %>
</div>

<div id="inactive">
  <%= render "unassigned" %>
</div>


<script>
  $(function() {
    setInterval(function(){
      $.getScript('/calls/?region=<%= params[:region] %>')
      .done(function(script, textStatus) {
        $('.selectize').selectize();
      })
    }, 15000);
  });
</script>

This works just fine in the calls/index view and no problems occur. But if I edit a new call in another tab (same session) the edit view will present and there are selectize elements within the form. When the ajax refreshes the calls/index view in the other tab the edit form selectize fields will unbind and I have to refresh the form to get them back.

This is before the ajax refreshes: enter image description here

This is after the ajax refreshes: enter image description here

I'm pretty sure that it's unbinding the selectize element, but not sure how to get around this or if I have some bug in my code. The edit form is a standard rails form_for, nothing special, just a view.

1 answer

  • answered 2017-06-17 19:05 nulltek

    This is a hack answer, but it worked. In the form on the edit view, I changed my selectors to select and initialized selectize in application.js like so:

    $(document).on('turbolinks:load', function() {
      $('.select').selectize();
    });
    

    Not sure why the selector element clobbered itself but renaming it fixed the issue.