web-dev-qa-db-ja.com

Rails javascriptはリロード後にのみ機能します

問題はまさに見出しが言っていることです。 javascriptはアセットパイプラインにあります。つまり、assets/javascripts/myfile.js.coffeeです。application.jsには次のものがあります。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= requier Twitter/bootstrap
//= require jasny-bootstrap
//= require_tree .

これはコーヒースクリプトです

$(document).ready ->
  $("#close").click ->
    $(this).parent().parent().slideUp("slow")




  $( "#datepicker" ).datepicker
    dateFormat : "yy-mm-dd"


  player_count = $("#player option").length


  $('#btn-add').click ->
    $('#users option:selected').each ->
      if player_count >= 8
        $('#select-reserve').append("<option      value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()    
      else
        $('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()
        player_count++


  $('#btn-remove').click ->
    $('#player option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()
      player_count--


  $('#btn-remove-reserve').click ->
    $('#select-reserve option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()


  $("#submit").click ->
   $("select option").prop("selected", "selected")

ブラウザのソースコードでjavaScriptがロードされていることがわかりますが、ページをリロードして初めて機能します。

javascriptruby-on-railsruby-on-rails-3asset-pipeline
52
Jason Carty

これはターボリンクの問題でした。私を正しい方向に導いてくれた@zwippieに感謝します！解決策は、これで私のコーヒースクリプトをラップすることでした：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
29
Jason Carty

ターボリンク5.0の場合、turbolinks：loadイベントを使用する必要があります。このイベントは、ページのロード時およびターボリンクのアクセス時に毎回呼び出されます。詳細： https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

CoffeeScriptコード：

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

JavaScriptコード：

document.addEventListener("turbolinks:load", function() {
  my_func();
})
65
María Luisa Carrión Donderis

これはターボリンクの問題だと思います。

プロジェクトからターボリンクを削除するか、スクリプトを次のように変更します。

$(function() {
  initPage();
});
$(window).bind('page:change', function() {
  initPage();
});
function initPage() {
  // Page ready code...
}

前述のとおり、 ここ 。

24
zwippie

jquery.turbolinks gemをインストールすると、Javascriptを変更せずに問題を解決できます。

19
Songhua Hu

このようにjquery.turbolinkを正しい位置に配置できます

 //= require jquery 
 //= require jquery.turbolinks 
 //= require jquery_ujs 
 //= require bootstrap-sprockets 
 //= require turbolinks

そしてGemfileにjquery-turbolinks gemをインストールできます

gem 'jquery-turbolinks'
9
Peak Sornpaisarn

Rails 5 jquery.turbolinks gemを使用して

$( document ).on('turbolinks:load', function() {
  // your code
}
6
Brad

Clock Time Picker などのJQueryプラグインを使用する場合は、最初にjQuery document ready関数。スクリプトは、ページ全体がロードされるまで待機してから実行を試みます。その後、turbolinks:loadイベント。

JQuery(function($) {
  $(document).on('turbolinks:load', function() {
    $('.time').clockTimePicker();
  });
});

あなたのapp/assets/javascripts/... jsファイル

1
StanisLove Sid

私はRails 5.2を試みており、'turbolinks:load'は、ページの最初のロード時にロードされませんでした。これは、CoffeeScriptファイルで必要なことです。

document.addEventListener('turbolinks:load', ->
  # ... CoffeeScript code here
)

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")
0
6ft Dan