Turbolinks bewirkt, dass JavaScript-Datei mehrmals ausgeführt wird

Ich verwende Rails 5.1.4, ich bin neu auf der Plattform und habe Probleme mit turboblinks, ich habe eine Datei mit jquery-Code, der ausgeführt werden muss, sobald die Seite geladen ist. aber wenn die Seite geladen wird, läuft die Datei mehrmals, aber wenn ich die Turboblöcke dort deaktiviere, funktioniert es wie ich es will. Also würde ich gerne wissen, ob es eine weniger gibt, um es zu reparieren, ohne die Turboblöcke auszuschalten. Vielen Dank im Voraus ..Turbolinks bewirkt, dass JavaScript-Datei mehrmals ausgeführt wird

So ist es mein Layout file.// app/views/layouts/application.html.erb

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>Rails web app</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks- 
    track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body class="<%= controller_name %> <%= action_name %>"> 
    <%= render 'layouts/header' %> 

    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %></p> 

    <div class="container"> 
    <%= yield %> 
    </div> 

    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true 
    %> 
</body> 
</html>

Über meine js Datei wie ich will sehen, versuchen, automatisch zu laden ein bootstrap modal mit einer animation wenn die seite geladen ist, eigentlich passiert das problem wenn ich auf einen link auf dieser seite klicke der mich zu einer anderen seite bringt und ich versuche auf die initialseite zu kommen wo die js file geladen ist, dann das problem das passiert. Ich sehe die Seite mehrmals aktualisieren und die js-Datei.

So gibt es meine Js-Datei mit Jquery-Code. //app/assets/javascripts/file.js

$(document).ready(function(){ 
    $('#myModal').on('hide.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut'); 
    }); 
    $('#myModal').on('show.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn 
    animated'); 
    }); 

    $('#myModal').modal('toggle'); 
});

Quelle

2017-12-01 Jalloh Ibrahima

Es gibt in der Tat Möglichkeiten, dieses Problem zu beheben. Bitte posten Sie Ihre Layout-Datei, wo Sie Turbolinks laden und den Rest Ihres Javascript. Bitte geben Sie auch den Code an, den Sie beim Laden der Seite ausführen möchten. Ich muss auch wissen, wie dieser Code enthalten ist. d. h. es ist Teil Ihrer JS-Assets oder Teil einer Ansicht. –

Hallo! @TomAranda, danke für die Antwort, also habe ich meine Frage mit dem Code aktualisiert, hoffe, dass du mich verstehen wirst. Vielen Dank im Voraus –

Turbolinks ersetzt der Körper so diese Linie Tag in den Kopf gesetzt:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

So:

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>Rails web app</title> 
    <%= stylesheet_link_tag 'application', media: 'all' %> 
    <%= csrf_meta_tags %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
</head> 
<body class="<%= controller_name %> <%= action_name %>"> 
    <%= render 'layouts/header' %> 

    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %></p> 

    <div class="container"> 
    <%= yield %> 
    </div> 
</body> 
</html>

oder hinzufügen data-turbolinks-eval=false an das Skript-Tag, das Turbolinks enthält.

Auch müssen Sie die turbolinks verwenden: load Ereignis:

$(document).on('turbolinks:load', function() { 
    $('#myModal').on('hide.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog animated rollOut'); 
    }); 
    $('#myModal').on('show.bs.modal', function (e) { 
    $('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn 
    animated'); 
    }); 

    $('#myModal').modal('toggle'); 
});

Quelle

2017-12-01 09:35:10 Snake

Hallo! @serpent, ich habe deinen Zweck versucht, aber es funktioniert nicht für mich, immer das gleiche Problem, wenn ich auf die Seite zurückkomme, die das Modal enthält, nachdem ich darin gelebt habe. Die Turboblöcke aktualisieren meine Seite mehrmals auf einer Aktion und ich denke, deshalb wird meine jquery-Funktion immer wieder aufgerufen. Ich hoffe, du siehst, was ich meine, danke für deine Antwort und danke im Voraus für alles. –

Ich habe meine Antwort bearbeitet – Snake

Sie meinen, bewegen Sie es in den Kopf der Seite, weil ich es bereits vor dem Ende meines Body-Tags habe. –

Turbolinks bewirkt, dass JavaScript-Datei mehrmals ausgeführt wird

Antwort

Verwandte Themen