在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单被复制

Question

_header.html.erb（表格部分）

<%= 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代码

<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>

故障或渲染问题（单击链接查看图像）

normal

after I click back button from the browser

谁能帮我看看这是为什么？另外，我的搜索表单位于 header 部分文件的导航栏中。

如果我在脚本中去掉 $(...).select，一切正常...我认为 select.js

有问题

Answer 1

这很可能是某些资产不一致，您应该检查您的 app\views\layouts 文件夹中是否有包含重复声明的枯萎 jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，如果您在 layout 文件夹和内部视图中声明相同的脚本。如果不是这种情况，请检查 render、yield 或 build 调用

Answer 2

我没能解决这个渲染问题（还在等待正确答案！）但是如果有人和我有类似的问题，请尝试跳出框框思考。这是我的技巧：我在我的应用程序中添加了一个后退按钮。

获取完整的url路径

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

仅当页面不是主页或搜索页时才显示后退按钮

<% 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 %>

与此同时，我仍在等待并尝试修复渲染问题...

解决了问题

只需将此代码添加到您的 .js 文件中

Turbolinks.clearCache();

Answer 3

不是一直清除缓存使得使用 turbolinks 实际上毫无意义吗？

换成这样怎么样？

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

Answer 4

在这里回答：

我在自己的代码中使用了这个解决方案：

    $(document).on('turbolinks:before-cache', function() {     // this approach corrects the select 2 to be duplicated when clicking the back button.
        $('.select-select2').select2('destroy');
        $('.select-search-select2').select2('destroy');
    } );

和一个观察者：

    $(document).ready( ready );                  //... once document ready
    $(document).ajaxComplete( ready );           //... once ajax is complete
    $(document).on('turbolinks:load', ready );   //... once a link is clicked

    function ready() {
        $(".select-search-select2").select2({
            theme: "bootstrap",
            language: 'es',
            allowClear: true
        });

        $(".select-select2").select2({
            theme: "bootstrap",
            language: 'es',
            minimumResultsForSearch: Infinity,
            allowClear: true
        });
    };

Answer 5

简单的解决方案，不要运行 select2 builder 在你不希望它运行的东西上。

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

在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单被复制

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

javascript

jquery

ruby-on-rails

jquery-select2

select2