Javascript Girl
  1. Javascript Girl
  3. Rails javascript ne fonctionne qu'après rechargement
Intereting Posts
Comment les différents projets d'optimisation de Javascript affectent-ils les performances de DOM? Pourquoi JavaScript n'a-t-il pas une dernière méthode? Communication entre deux enfants Iframe utilisant post-message Comment continuer la propagation de l'événement après l'annulation? Extension des valeurs par défaut d'une superclasse modèle dans Backbone.js L'élimination des éléments multimédia html5 supprime-t-elle également la mémoire utilisée par la vidéo / audio? Insérer du texte entre le texte sous Javascript RegEx pour faire correspondre les choses entre les parenthèses Comment vérifier si 'débogueur'; Mot-clé existe? Rafraîchissement automatique dans ASP.NET MVC Passez vars à JavaScript via l'attribut SRC Le javascript peut-il fonctionner dans un iframe affecte-t-il la page principale? Code JavaScript pur pour l'authentification de base HTTP? Propriété définie dynamiquement de l'objet imbriqué Téléchargement d'un fichier avec Ajax POST, Multipart content et JSON loadload

Rails javascript ne fonctionne qu'après rechargement

Le problème est exactement ce que dit le titre. Le javaScript se trouve dans le pipeline d'actifs, c'est-à-dire les actifs / javascripts / myfile.js.coffee Dans l'application.js j'ai: 

//= 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 sur le navigateur que le javaScript a été chargé, mais cela ne fonctionne qu'après la recharge de la page.

    Pour les turbolinks 5.0, vous devez utiliser les événements turbolinks: load , qui est appelé la première fois sur le chargement de la page et chaque fois qu'une visite turbolink. Plus d'informations: 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(); })

    C'était un problème de turbolinks. Merci à @zwippie de me conduire dans la bonne direction! La solution était d'envelopper mon coffeescript en ceci: 

     ready = -> // functions $(document).ready(ready) $(document).on('page:load', ready)

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

    Retirez les turbolinks de votre projet ou modifiez votre script à quelque chose comme: 

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

    Comme mentionné ici .

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

    Vous pouvez avoir votre jquery.turbolink place à la bonne position comme celle-ci 

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

    Et dans le Gemfile, vous pouvez installer le joyau jquery-turbolinks 

     gem 'jquery-turbolinks'

    Rails 5 Utilisez le joyau jquery.turbolinks et utilisez 

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