使用 turbolinks，jQuery 停止工作直到硬刷新

Question

感谢相关的 RailsCast 视频，我实现了动态 select 菜单。它运行良好，但现在我必须刷新我的网页，以便我的 JQuery 代码（用我的 .coffee 脚本编写）可以工作。

我在网上看到，使用 javascript 和编写 $(document).ready(function()) 的人必须更改 $(document).bind('pageinit') 中的这部分代码。

问题是我不知道如何使它适应我的 .coffee 文件。

我还阅读了有关使用 PJAX 的内容，但 Turbolinks 应该做同样的工作，只是这种问题可能发生在 Turbolinks 上。

我的 Turbolink gem 在我的 GemFile 中并且在我的 application.js 文件中需要。

我应该写什么才能让 JQuery 代码直接工作而不必刷新我的网页？

这是我的 .coffee 文件中的代码：

jQuery ->
  $('#test_contrat_id').parent().hide()
  contrats = $('#test_contrat_id').html()

  $('#test_employe_id').change ->
    employe = $('#test_employe_id :selected').text()
    escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\')
    options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
    if options
      $('#test_contrat_id').html(options)
      $('#test_contrat_id').parent().show()
    else
      $('#test_contrat_id').empty()
      $('#test_contrat_id').parent().hide()

这是用我的表单编写的代码：

<div class="field">
  <%= f.label :employe_id %><br>
  <%= f.collection_select :employe_id, Employe.order(:nom_employe), :id, :nom_employe, include_blank: true %>
</div>
<div class="field">
  <%= f.label :contrat_id %><br>
  <%= f.grouped_collection_select :contrat_id, Employe.order(:nom_employe), :contrats, :nom_employe, :id, :nom_contrat, include_blank: true%>
</div>

Answer 1

您必须为运行 JavaScript 以及

使用 jquery.turbolinks 宝石

Answer 2

您没有像其他答案状态那样使用jquery.turbolinks。您只需要等待运行您的 javascript 直到 Turbolinks 触发 page:load 事件。

有关 Turbolinks 5 的更新，请参阅 post 的底部

$(document).on 'ready page:load', ->
  # granted I don't know the context here, but instead of using javascript to hide something on DOM load, I would use CSS. Look below for that solution.
  $('#test_contrat_id').parent().hide()


$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().show()
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parentemploye

以上 CSS 评论...

# css file
.hidden {
  display: none !important;
  visibility: hidden !important;
}

# add the class .hidden to that element in your view.

# your CoffeeScript will now be
$(document).on 'change', '#test_employe_id', (e) ->
  contrats = $('#test_contrat_id').html()
  employe = $('#test_employe_id :selected').text()
  escaped_employe = employe.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\')
  options = $(contrats).filter("optgroup[label='#{escaped_employe}']").html()
  if options
    $('#test_contrat_id').html(options)
    $('#test_contrat_id').parent().removeClass('hidden')
  else
    $('#test_contrat_id').empty()
    $('#test_contrat_id').parent().addClass('hidden')

This GitHub thread 非常有趣，值得您阅读使用 .hide() 和 .show()。

Turbolinks 5

Turbolinks 5 添加了自己的事件侦听器，因此您不再需要使用 ready page:load。

$(document).on 'turbolinks:load', ->

Answer 3

Turbolink 是问题所在。我第一次用的是双扳机，效果很好。

我写的不是 :

$(document).ready(function(){my code});

像这样：

    <script type="text/javascript">

      var ready = function(){
        //all my javascript code
      };

      $(document).ready(ready);
      $(document).on('page:load',ready);

    </script>

但后来我还是遇到了一些问题。所以我卸载了我的 GemFile 中的 gem turbolink 现在一切正常。

看来关于硬刷新的问题与Turbolink有关。

使用 turbolinks，jQuery 停止工作直到硬刷新

With turbolinks, jQuery stops working until a hard refresh

jquery

ruby-on-rails

coffeescript

turbolinks