Select2 не работает без перезагрузки страницы - PullRequest
Новая
       16

Select2 не работает без перезагрузки страницы

0 голосов
/ 04 декабря 2018

У меня проблема с Jquery select2 в Rails. У меня есть модель работы, в которой дни - это выпадающее меню, и я хочу ввести значения, используя Select2 Jquery.

ниже - поле дней _form.html.erb

  <div class="field">
<%= form.label :days %>
<%= form.select :days, options_for_select($days), options = {:multiple => true}, :id => "dropdown" %>

application.js 

//= require jquery
//= require jquery_ujs
//= require select2-full
//= require activestorage
//= require turbolinks
//= require_tree .


  $(document).ready(function(){

    $( "#dropdown" ).select2({
        theme: "bootstrap"
    });
 });

select2 работает после перезагрузки страницы, но не работает, если страница перенаправляется по ссылке в навигационной панели.

приведенный ниже код панели навигации: 

<nav>
 <div class="container">
  <ul class="main-menu">
   <li><%= link_to "Home", root_path %></li> 
   <li><%= link_to "new work", new_work_path %></li> 
  </ul>
 </div>
</nav>

application.html.erb: 

<!DOCTYPE html>
 <html>
  <head>
   <title>Stack1</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= render 'layouts/navbar' %>
   <%= yield %>
  </body>
 </html>

Сценарий заключается в том, что пользователь нажимает новую работу в панели навигации, и для нее отображается new_work_pathвходные значения, здесь select2 не работает, но после перезагрузки страницы select2 работает.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 04 декабря 2018

Наконец-то нашел решение для моего вопроса, думаю, ответ поможет кому-то, кто сталкивается с той же проблемой во время исследования.Вместо прослушивания события $(document).ready(function(), прослушивайте событие для $( document ).on('turbolinks:load', function(), потому что рельсы используют турболинки.поэтому мы должны изменить код следующим образом: 

$( document ).on('turbolinks:load', function() {
    $( "#dropdown" ).select2({
        theme: "bootstrap"
    });

Надеюсь, что это поможет для последующей проблемы.

...