web-dev-qa-db-fra.com

JavaScript javascript ne fonctionne qu'après rechargement

Le problème est exactement ce que dit le titre. Le javaScript est dans le pipeline d’actifs, c’est-à-dire assets/javascripts/myfile.js.coffee

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

C'est le coffeescript

$(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")

Je peux voir dans le code source du navigateur que le code javaScript a été chargé, mais cela ne fonctionne qu'après le rechargement de la page.

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

C'était un problème de turbolinks. Merci à @zwippie de m'avoir conduit dans la bonne direction!

ready = ->
// functions

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

Pour turbolinks 5.0, vous devez utiliser l'événement turbolinks: load, appelé la première fois sur la page et toutes les visites de turbolink. Plus d'infos: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Code CoffeeScript:

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

Code JavaScript:

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

Je suppose que c'est un problème de turbolinks.

Supprimez turbolinks de votre projet ou modifiez votre script pour obtenir quelque chose comme:

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

Comme mentionné ici .

24
zwippie

Vous pouvez installer le fichier jquery.turbolinks gem pour résoudre le problème sans modifier votre Javascript.

19
Songhua Hu

Vous pouvez avoir votre place jquery.turbolink au bon endroit comme ceci 

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

Et dans Gemfile, vous pouvez installer le gem Jquery-turbolinks

gem 'jquery-turbolinks'
9
Peak Sornpaisarn

Rails 5 Utilisez le gem jquery.turbolinks et utilisez 

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

Si vous travaillez avec des plugins JQuery tels que Clock Time Picker , utilisez d’abord la fonction jQuery document ready, ce qui fait que votre script attend que la page entière soit chargée avant de tenter de s’exécuter, puis vous pouvez utiliser turbolinks:load event . 

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

Il est bon d’être situé dans votre fichier app/assets/javascripts/... js

1
StanisLove Sid

J'essaie Rails 5.2 et j'ai constaté que 'turbolinks:load' n'était pas chargé lors du premier chargement d'une page. C'est ce que je devais faire dans mon fichier CoffeeScript.

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

if !Turbolinks?
  location.reload

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