Rails de javascript ne fonctionne qu'à partir de rechargement

Le problème est exactement ce que le titre dit. Le javaScript est dans l'asset pipeline j'.e actifs/javascripts/monfichier.js.le café Dans le 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 la 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 javaScript a été chargé, mais il ne fonctionne qu'après que j'ai recharger la page.

InformationsquelleAutor Jason Carty | 2013-06-26
  1. 65

    Pour turbolinks 5.0, vous devez utiliser le turbolinks:charge événement, qui est appelée la première fois au chargement de la page et à chaque fois sur un turbolink visite. Plus d'infos: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

    CoffeeScript code:

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

    Code JavaScript:

    document.addEventListener("turbolinks:load", function() {
  my_func();
})
    • J'ai exactement le problème mais im en utilisant C# et asp.net. Pouvez-vous s'il vous plaît suggérer le bon script pour cela? Merci
    • C'est le seul qui fonctionne pour moi sur de nouveaux rails 5 app
    • asp.net et C# sont généralement du côté serveur. Vous devriez probablement regarder sur votre côté client fichiers (ce qui peut être spécifique .js fichiers ou dans votre code html en fonction de ce que vous essayez de le faire)
    • Exactement le même problème, et en particulier, j'ai été à essayer de comprendre comment modifier le turbolink charge sur une base. Merci!
    • Merci beaucoup!!!
    • Passé les âges de lutte avec cette. Vous êtes à la solution a fonctionné pour moi.
    • Je vais avoir ce problème et souhaite mettre le JavaScript et CoffeeScript dans mon application, mais je ne sais pas où mettre les deux blocs de code. Pouvez-vous me dire où les mettre?
    • Je ne pouvais pas obtenir que cela fonctionne. Mais Joseph, N de répondre à here a fonctionné pour moi
    • C'est la seule solution qui a fonctionné pour moi. Merci beaucoup
    • Vous m'avez sauvé ! merci beaucoup !

    InformationsquelleAutor María Luisa Carrión Donderis
  2. 29

    C'était un turbolinks problème. Grâce à @zwippie pour me mener dans la bonne direction!
    La solution était d'envelopper mon coffeescript dans ce:

    ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
    • ce n' -> signifie?
    • C'est coffeescript, son la syntaxe d'une fonction.
    • Je ne comprends pas, ne vous mettez ce code exact sur le dessus du code à partir de votre question? Avez-vous choisi l'un des événements? Avez-vous imbriquer l'un dans l'autre?
    • Salut @GiovanniDiToro, Ce que vous devez faire est d'exécuter du code après la page:load événement. Donc, dans mon exemple, j'ai enveloppé le code que j'ai envie de courir à l'intérieur d'une fonction appelé prêt, et a ajouté que comme un callback à exécuter après l' page:load événement.
    • Je l'ai fait, j'ai appelé via coffeescript à l'intérieur de JQuery-> $(document).prêt ->$(document).sur "turbolinks:load', -> . Mais j'ai aussi découvert que sous IE, ça fonctionne , mais firefox effectue automatiquement si la valeur est vide...
    InformationsquelleAutor Jason Carty
  3. 24

    Je suppose que c'est un turbolinks question.

    Supprimer turbolinks de votre projet ou de modifier votre script à quelque chose comme:

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

    Comme mentionné ici.

    • Cette solution a fonctionné pour moi et les Rails 5, mais au lieu de 'page:change' j'ai utilisé 'turbolinks:load'.
    InformationsquelleAutor zwippie
  4. 19

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

    InformationsquelleAutor Songhua Hu
  5. 9

    Vous pouvez avoir votre jquery.turbolink place à la bonne position, comme ce 

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

    Et dans le Gemfile vous pouvez installer le
    jquery-turbolinks gem

    gem 'jquery-turbolinks'
    • si vous avez des requêtes, puis turbo liens jquery.turbolinks vous permettra de générer la condition d'avoir à créer de la recharge. C'est la plus rapide, la moins chère et la réponse adéquate à mon avis. ajouter gem + insert dans le bon ordre le besoin énoncé dans app/assets/javascript/application.js
    InformationsquelleAutor Peak Sornpaisarn
  6. 6

    Rails 5
    Utiliser le jquery.turbolinks gem et à l'aide de 

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

    Si vous travaillez avec des plugins JQuery comme Le Temps De L'Horloge Du Sélecteur De, tout d'abord utiliser jQuery document ready fonction, ce qui provoque votre script à attendre jusqu'à ce que la page est entièrement chargée avant de tenter d'exécuter et puis vous pouvez utiliser turbolinks:load événement. 

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

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

    InformationsquelleAutor StanisLove Sid
  8. 0

    Je suis en train de Rails 5.2 et a constaté que 'turbolinks:load' n'étais pas chargé la première fois qu'une page se charge. C'est ce que je devais faire dans mon CoffeeScript fichier.

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

if !Turbolinks?
  location.reload

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