[英]Forms with Select2 are duplicated when clicking back button on browser in Rails 5
<%= 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 %>
<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>
有人可以帮我看看为什么吗? 另外,我的搜索表单位于标题部分文件的导航栏中。
如果我在脚本中去掉 $(...).select,一切正常...我认为 select.js 有问题
在这里回答: https : //stackoverflow.com/a/41915129/5758027
我在自己的代码中使用了这个解决方案:
$(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
});
};
不是一直清除缓存使使用 turbolinks 几乎毫无意义吗?
怎么样呢?
$(document).on('turbolinks:before-cache', function(e) {
return $('.form-control.select2').each(function() {
return $(this).select2('destroy');
});
});
我无法解决这个渲染问题(仍在等待正确答案!)但如果有人像我一样有类似的问题,请尝试跳出框框思考。 这是我的技巧:我在我的应用程序中添加了一个后退按钮。
# 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();
这很可能是一些资产不一致,你应该检查你的app\\views\\layouts
文件夹中是否有重复声明的 wither jQuery、jQuery UJS 或 Turbolinks 的文件。 检查页面的所有<script>
标签,如果您在layout
文件夹和内部视图中声明相同的脚本。 如果不是这种情况,请检查render
、 yield
或build
调用
简单的解决方案,不要在你不想运行的东西上运行 select2 构建器。
$("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.