Von allen guten und bösen Geistern verlassen

Nach dem im ersten Teil auf die Grundlagen zur generellen Einbindung eines Javascripts in WordPress eingegangen wurde, geht es heute um den Aufbau dieses Skriptes.

Wie im ersten Teil bereits beschrieben, wird im Javascript auf Funktionen von jQuery zurückgegriffen, um die Abwicklung des AJAX-Requests so einfach wie möglich zu machen. Gleichzeitig kann über jQuery das Script selber auch an ein HTML-Element gebunden werden, welches die Kommunikation mit Backend von WordPress initiiert.

Einbindung mit jQuery

Da das Skript auf jQuery aufbaut, sollte es auch erst ausgeführt werden, wenn jQuery vorhanden ist und das HTMl-Dokument geladen wurde. Daher ist von einer entsprechenden Funktion umschlossen:

jQuery(document).ready(function($) {
    …
});

Der erste Teil des Skriptes dient dazu, die eigentlich Funktion an ein HTML-Element zu binden. In diesem Fall gibt es in Single-Ansicht des Themes, genauer gesagt in der Single-Ansicht für den Custom Post Type „Wunsch“ einen Button mit der CSS-Klasse „wunsch“. Der entsprechende Teil in der Datei single-wunsch.php sieht daher so aus (auf die Verwendung von Custom Post Types in WordPress und die Nutzung von separaten Templates wird an dieser Stelle nicht eingegangen):

<button class="wunsch" data-id="">schenken

Das data-* Attribut

Auffällig ist an dem HTML-Element das sogenannte Custom Data Attributes, ein Bestandteil von HTML 5. Über das Attribut data-* können eigene Daten an ein Element geknüpft werden. Wichtig ist nur das Prefix data-, dem dann mindesten ein Zeichen in Kleinschreibung folgen muss. Dahinter wird dann nach dem Gleichheitszeichen in Anführungszeichen der Wert gesetzt. Der Wert im Beispiel oben ist jedoch kein statischer Parameter, sondern wird bei Aufruf der Single-Seite generiert. Dabei handelt es sich bei the_ID() um eine Funktion von WordPress, welche die ID des derzeitigen Datensatzes ausgibt. Diese wird später vom Javascript ausgelesen und innerhalb des AJAX-Request weiter an das Backend gereicht. Auf dieses Weise weiss WordPress dann, auf welchen Datensatz sich die Anfrage bezieht.

Innerhalb des Javascript muss der Parameter aus dem data-*-Attribut ausgelesen und in einer Variable gespeichert werden. Zusätzlich wird noch eine weitere Variable verwendet, die sich auf die empfangene Funktion im Theme bezieht. Zusammen sieht dann so aus:

var data = {
    'action': 'tb_verschenkt',
    'wunsch-nr':$(this).attr("data-id")
};

Beide Parameter werden als JSON-Objekte (JavaScript Object Notation) in der Variable data gespeichert.

Hinweis: Die AJAX-Kommunikation in beide Richtung erfolgt über JSON-Objekte beziehungsweise Arrays.

Paramter als JSON Objekt

Nach der Definition der erforderlichen Parameter erfolgt jetzt der eigentliche AJAX-Aufruf. Via HTTP-POST wird mit der PHP-Funktion von WordPress kommuniziert, die die Anfrage weiterleitet an die von uns definierte Funktion. Dazu wird von jQuery die $.post() Methode verwendet.

$.post( weitere_parameter.ajax_url, data, function(response) {   
    …
}, 'json');

Innerhalb des Aufrufs werden Parameter an WordPress übergeben. Der wichtigste dabei ist der Wert, der sich in weitere_parameter.ajax_url befindet. Dabei handelt es sich um genau jenen Wert, der in der Datei functions.php über die Lokalisierungsfunktion ins Frontend eingebunden wurde. Weniger elegant ließe sich an dieser Stelle auch die vollständige URL zur Datei  admin-ajax.php angeben.

Der zweite Parameter der übergeben wird, enthält das etwas weiter definierte JSON-Objekt. An dritter Stelle folgt dann eine Call-Back-Funktion. Dabei ist eine Callback-Funktion etwas, was nach der Ausführung des PHP-Skriptes im Backend aufgerufen wird. Diese Funktion nimmt die Antwort des Server entgegen, erkennbar an der Variable response (die natürlich auch beliebig anders heißen kann). Die Callback-Funktion befindet sich dann später in der geschweiften Klammer.

Der letzte Wert in der Reihe, json, teilt der Gegenstelle lediglich mit, welche Daten-Typ das Skript für Antworten erwartet, in diesem Fall also JSON.

Callback

Genau diese Antwort wird dann in der Callback-Funktion verarbeitet:

if (response['status']) {
    $(location).attr('href',response['zielurl']);
             
}

Die If-Abfrage bezieht sich auf einen Rückgabewert, der Aufschluss darüber liefern soll, ob die Anfrage erfolgreich verlaufen ist oder nicht. Sofern da der Fall ist, wird mit der $(location) Methode von jQuery der Browser auf eine URL verwiesen, die  in den zurückgegebene Daten enthalten ist.

Was an dieser Stelle unberücksichtigt beleibt ist die Reaktion auf eine fehlgeschlagene Abfrage, die über einen Else-Teil erfolgen könnte.

Alles zusammen

Das gesamte Javascript sieht dann wie folgt aus:

jQuery(document).ready(function($) {
    $('button.wunsch').click(function(){
    
    var data = {
        'action': 'tb_verschenkt',
        'wunsch-nr':$(this).attr("data-id")
    };
    $.post(weitere_parameter.ajax_url, data, function(response) {
        if (response['status']) {
            $(location).attr('href',response['zielurl']);    
        }

    }, 'json');
    });
});

Zusammenfassung

Es wurde gezeigt, wie ein Javascript auszusehen hat, welches via AJAX mit dem Backend von WordPress kommunizieren kann. Dazu gehört auch, dass die Daten, welche vom Backend zurückgegeben werden, auch adäquat verarbeitet werden. Gestreift wurde dabei JSON als Datentyp, der auch für andere Arte der Anfrage an WordPress relevant ist.

Ausblick

Der nächste und auch letzte Teil in der Serie beschäftigt sich dann damit, wie die Funktion in der Datei functions.php des Themes auszusehen hat, die mit dem Javascript kommuniziert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

DSGVO Cookie Consent mit Real Cookie Banner