Eigenes Jquery Script …is not a function

Gelöst tommy84
(@tommy84)

vor 5 Jahren, 9 Monaten
Hallo Zusammen,

ich verzweifle grade auf meiner Seite jquery einzubinden. Ich muss dazu sagen, dass ich relativ neu in Sachen WordPress bin also entschuldigt falls ich hier etwas grundlegendes grade verplane…

Ich versuch es aktuell mit einem einfachen Beispiel:
Ich gehe wie folgt vor:
Ich füge in einer Seite den HTML Code ein (quelle http://jqueryui.com/draggable/)

<div id=“draggable“ class=“ui-widget-content“>
<p>Drag me around</p>
</div>

Das Skript hierzu ist:
$( function() {
$( „#draggable“ ).draggable();
} );

Jetzt komm ich zu dem Punkt das Script einzubauen.

Ich habe es per Plugin sowie per include in der functions.php der Themes versucht (auch mit den unterschiedlichen Schreibweisen die ich zu dem Thema finden)

Hierzu habe ich mehrere Tutorials im Internet versucht aber ich bekomme immer denselben Fehler

Uncaught TypeError: jQuery(…).draggable is not a function

Wenn ich mir einfach eine eine Variable in der Konsole ausgeben lasse Funktioniert das.

Könnt Ihr mir hier ein Denkanstoß oder ein funktionierendes Bespiel geben wie man es richtig macht?

Ich bevorzuge bisher den Weg über ein Plug-In
Wordpress liefert doch jquery mit. Da muss ich doch nach meinem Verständnis nicht noch die jquery scrips im Html Head verlinken oder?

Vielen Dank.

Tommy
- Dieses Thema wurde geändert vor 5 Jahren, 9 Monaten von tommy84.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Moderator Bego Mario Garde
(@pixolin)

vor 5 Jahren, 9 Monaten
Hallo @tommy84 und willkommen im Forum,

WordPress verwendet bereits selber jQuery-UI-Draggable und es ist nicht ratsam, dass jedes Plugin seine eigene Version hinzufügt. Statt dessen kannst du in der functions.php deines Themes einfach angeben, dass du jQuery-UI-Draggable nutzen möchtest. Deine jQuery-Funktion kannst du dann in eine eigene JavaScript-Datei in Theme setzen und ebenfalls einbinden.
```
function my_draggable_js() {
	wp_enqueue_script( 'jquery-ui-draggable' );
	wp_enqueue_script( 'draggable', plugin_dir_url( __FILE__ ) . 'js/draggable.js', array( 'jquery-ui-draggable' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'my_draggable_js' );
```
und in der JavaScript-Datei js/draggable.js:
```
jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    $( '#draggable' ).draggable();
} );
```
Thread-Starter tommy84
(@tommy84)

vor 5 Jahren, 9 Monaten

Hallo,

danke für die schnelle Antwort. Kam leider jetzt erst zur Umsetzung.

Bei mir funktionieren meine Scripte erst, wenn ich dieses per plugin Installiere. Bzw. die draggable.js per Plugin hochlade.

Stellt dies ein Problem dar oder ist das so auch in Ordnung? ich nutze das Theme twentyseventeen für meine Tests.

Viele Grüße

Tommy

Moderator Bego Mario Garde
(@pixolin)

vor 5 Jahren, 9 Monaten

Bei mir funktionieren meine Scripte erst, wenn ich dieses per plugin Installiere.

Welches Plugin verwendet du dafür?
Welche Skripte meinst du?

Bzw. die draggable.js per Plugin hochlade.

Hast du dich an meine Anleitung gehalten?

Stellt dies ein Problem dar …

Ja.

… oder ist das so auch in Ordnung?

Nein. Wenn jedes Plugin seine eigenen Libraries mitbringt, erzeugst du damit Konflikte.
Thread-Starter tommy84
(@tommy84)

vor 5 Jahren, 9 Monaten
Hi,

Ich hoffe das ich mich korreckt an die ANleitung healten habe… Ich gehe wie folgt vor:

in der functions.php des Themes:
```
function my_draggable_js() {
        wp_enqueue_script( 'jquery-ui-draggable' );
        wp_enqueue_script( 'draggable', plugin_dir_url( __FILE__ ) . 'js/draggable.js', array( 'jquery-ui-draggable' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'my_draggable_js' );
```
Dann lege ich eine neue Datei in dem Themeordner an:
js/draggable.js
```
jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    $( '#draggable' ).draggable();
} );
```
Im Artikel den ich teste steht:
```
<div></div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
```
So funktioniert es leider nicht. In der Konsole sehe ich auch, dass das Skript nicht geladen werden kann.

Ich habe mal ein Plugin nach einem Beispiel zum testen erstellt. Der Inhalt ist:
custom-functions.php
```
function load_my_custom_scripts_31012017()
{
    wp_enqueue_script( 'my_custom_js', plugins_url( 'custom.js', __FILE__ ), array('jquery') );
}
add_action('wp_enqueue_scripts', 'load_my_custom_scripts_31012017');
```
custom.js
```
jQuery(document).ready(function($) {
alert("Aufruf Test"); 
$( "#draggable" ).draggable();
});
```
Nach dem ich dieses aktiviert habe funktioniert die Funktion.

Danke für die Zeit.

Tommy
- Diese Antwort wurde geändert vor 5 Jahren, 9 Monaten von tommy84.
Moderator Bego Mario Garde
(@pixolin)

vor 5 Jahren, 9 Monaten

In dem Code fürs Theme ist ein Fehler. Statt

wp_enqueue_script( 'draggable', plugin_dir_url( __FILE__ ) . 'js/draggable.js', array( 'jquery-ui-draggable' ), false, false );

muss es bei Themes

wp_enqueue_script( 'draggable', get_template_directory_uri() . '/js/draggable.js', array( 'jquery-ui-draggable' ), false, false );

heißen. Dann klappt das auch. Sorry für die Verwirrung.

Thread-Starter tommy84
(@tommy84)

vor 5 Jahren, 9 Monaten

Super klappt.

Danke für die Hilfe 🙂

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „Eigenes Jquery Script …is not a function“ ist für neue Antworten geschlossen.

Eigenes Jquery Script …is not a function

Themen-Schlagwörter

Ansichten