时间戳

首页 > 解决方案 > Select2 在不重新加载页面的情况下无法正常工作

jquery - Select2 在不重新加载页面的情况下无法正常工作

问题描述

我对 Rails 中的 Jquery select2 有疑问我有一个模型工作，其中天是一个下拉菜单，我想使用 Select2 Jquery 输入值。

下面是天字段 _form.html.erb

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

应用程序.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>

应用程序.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 工作。

任何帮助表示赞赏。

标签： jqueryruby-on-railsrubyjquery-select2

解决方案

终于找到了我的问题的解决方案，我认为答案会帮助在研究时面临同样问题的人。而不是听 event $(document).ready(function()，听 event for$( document ).on('turbolinks:load', function()因为 rails 使用 turbolinks。所以我们应该将代码修改为：

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

希望这将有助于以后的相同问题。

推荐阅读