Ruby on Rails || Jquery- und JavaScript-Bibliotheken funktionieren nicht

8

Ich habe eine Seite auf Codepen erstellt, die später zu meiner Ruby on Rails-App hinzugefügt werden soll ( Ссылка ) ) , wo der ganze Code gut funktioniert.

Nach dem Erstellen der Seite habe ich versucht, die Seite meiner Ruby on Rails-App mit spree hinzuzufügen (die in Cloud 9 Ссылка läuft "Der Server ist möglicherweise zu dem Zeitpunkt, zu dem Sie dies lesen, nicht offline") . Ich habe das folgendermaßen gemacht:

Schritt 1: Der HTML-Code wurde zu index.html.erb

hinzugefügt

Schritt 2: Hinzugefügtes CSS CDN zu _head.html.erb

Schritt 3: Alle JavaScript-Bibliotheken wurden heruntergeladen und im folgenden Ordnerpfad hinzugefügt: - & gt; App - & gt; Vermögenswerte - & gt; Javascripte - & gt; Frontend - & gt; speichern

Schritt 4: Die folgende Codezeile wurde zu meiner all.js-Datei (innerhalb des Frontend-Ordners) hinzugefügt

%Vor%

An diesem Punkt hätte mein Code funktionieren sollen, tut es aber nicht.

%Vor%

Es stört mich, dass der exakt gleiche Code mit genau den gleichen Bibliotheken nicht in meiner Ruby on Rails App zu funktionieren scheint, und es Phantom ist mir warum?

Der Fehler is not a function tritt auf, weil der Code nicht erkannt wird, normalerweise weil die Bibliotheken nicht geladen sind. Aber ich habe die Quellseite überprüft, nachdem die Seite geladen wurde und alle Bibliotheken geladen sind.

Die TweenMax-Fehler sind auch Phantom mir, weil es die gleichen Bibliotheken und den gleichen Code ist.

Ich habe verschiedene Lösungen ausprobiert, wie zB den Bibliothekscode zu meiner script.js hinzuzufügen, und es schien zu funktionieren, aber das wäre eine falsche Lösung.

Ich denke, ich habe alle Informationen und Code benötigt, aber wenn Sie mehr brauchen, zögern Sie nicht zu fragen.

Um meine Frage zusammenzufassen:

Problem : Meine Jquery-Bibliotheken scheinen nicht zu funktionieren

Frage : warum?

script.js

%Vor%

index.html.erb

%Vor%

UPDATE (HINZUGEFÜGTE ANGEWANDTE DATEIEN)

application.js

%Vor%

_head.html.erb

%Vor%

UPDATE 2 (hat die Datei application.js geändert)

%Vor%

ANTWORT

Sie finden die Antwort in der Antwort unten, aber es ist nicht der einzige Teil der Antwort. Der letzte Teil der Antwort war in der CSS, es gab einen Konflikt in meinem Körper, der einen Teil des Fehlers verursachte. Wenn Sie das gleiche Problem haben, stellen Sie sicher, dass Ihre Bibliotheken an der richtigen Position (unten für mich) und der richtigen Reihenfolge geladen sind. Stellen Sie außerdem sicher, dass Ihr CSS keine Fehler verursacht.

    
Salman 12.08.2017, 11:27
quelle

1 Antwort

6

Nach den Dateien, die Sie eingefügt haben, werden die Bibliotheken in der falschen Reihenfolge geladen. Ich vermute, dass die folgende Zeile an das Ende Ihres application.js -Verzeichnisses verschoben werden sollte, um sicherzustellen, dass es erst geladen wird, nachdem alle jQuery -Plugins geladen wurden. Etwas wie:

%Vor%

Beachten Sie, dass require_tree nicht die Reihenfolge garantiert, in der Ihre benutzerdefinierten Skripts geladen werden. Sie können also immer noch mit diesen Problemen fertig werden, wenn ein Skript von dem anderen abhängig ist. Sie sollten versuchen, eigenständige Skripts zu schreiben, so dass die Reihenfolge der Ausführung keine Rolle spielt. Wenn Sie Skripts unbedingt voneinander abhängig schreiben müssen, sollten Sie sich darauf konzentrieren, sie in der richtigen Reihenfolge in Ihrem Manifest manuell zu importieren.

Auch importieren Sie falsch aussehen. Sie scheinen jQuery dreimal importiert zu haben. Sie sollten den Inhalt des <head> -Tags in die endgültige gerenderte Seite im Entwicklungsmodus einfügen, um sicherzustellen, dass dies tatsächlich funktioniert.

%Vor%

Versuchen Sie:

%Vor%

Nach dem Hinzufügen der relevanten Edelsteine ​​zu deinem Gemfile , natürlich.

    
Prajjwal 12.08.2017, 12:28
quelle