Question

由于相关的RailsCast视频，我实现了动态选择菜单。它工作得很好，但现在我必须刷新我的网页，以便用我的.coffee脚本编写的JQuery代码可以工作。

我在网上看到，使用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, '\\$1')
    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

您没有像其他答案状态一样使用jquery.turbolinks。您只需要等待运行您的javascript，直到Turbolinks触发页面：加载事件。

请参阅帖子底部，了解Turbolinks 5的更新

$(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, '\\$1')
  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, '\\$1')
  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 2

您必须使用jquery.turbolinks gems来运行JavaScript以及

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停止工作直到硬刷新

3 个答案: