Question

我正在尝试为我的rails应用程序实现所选插件和一个日期选择器，并且在第二页访问时遇到问题（不是页面重新加载，重新加载页面实际上刷新了插件并将它们带回来），插件出现然后很快消失，几乎就像它们被重置一样。

我已经尝试过搜索这个问题，但我还没有真正看到有关rails的内容，我认为它与脚本的服务方式和bootstrap的css / js文件有关，但我不是很确定无法确定它。

我的页面加载时也会收到[缓存未命中]，如果这有所不同。

我尝试过的事情：

在application.js和application.css
移动jQuery以直接将插件初始化为_form.erb.html页面
将jQuery移动到application.js
删除所述document.ready（并使用document.bind）
在document.ready中使用setTimeout作为快速修复，在它们“重置”后设置它们（此处没有骰子）
当我怀疑部分js被覆盖.chosen和.datepicker时出于某些奇怪的原因（不是这样），删除部分

这是一些代码，我觉得这是一个非常愚蠢和简单的东西。

//= require rails-ujs
//= require turbolinks
//= require jquery.min
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require chosen.jquery.min
//= require bootstrap-datepicker

$(document).ready(function(){

    $('.chosen').chosen(
        {   
            allow_single_deselect: true,
            no_results_text: 'No results matched',
            width: '200px'
        }
    );

    $('.datepicker').datepicker();


});

和application.css

 /*
 *= require_tree .
 *= require_self
 *= require chosen.min
 *= require datepicker
 */

违规_form.html.erb

  <div class="field">
    <%= form.label :customer_id %>
    <%# form.text_field :customer_id, id: :order_customer_id %>
    <%= collection_select( :order, :customer_id, @customers, :id, :name,{selected: order.customer_id, prompt: false}, { class: 'chosen' }) %>
  </div>

  <div class="field">
    <%= form.label :date %>
    <%# form.date_select :date, id: :order_date, class: 'datepicker' %>
    <%= form.text_field :date, default: 'Pick a date', class: 'datepicker' %>
  </div>

Answer 1

我认为 turbolinks 可以实现。您可以通过删除//= require turbolinks文件中的application.js行来确认并重新启动您的应用程序。如果您的应用程序中确实需要turbolinks，请查看以下链接以解决此问题。

Rails 4: how to use $(document).ready() with turbo-links

希望它有所帮助。

第二次访问页面时未应用Rails css / js

1 个答案: