jQuery Skriptcode

jQuery und Javascript Tipps

jQuery ist ein Javascript Framework mit dem das Handling von dynamischen Inhalten stark vereinfacht wird. Die offizielle Projektseite mit vielen Anwendungsbeispielen ist diese: https://jquery.com/

jQuery von extern einbinden

Für manche Projekte ist es sinnvoll die aktuelle Version von jQuery extern hostet und minimiert im <head> einer Webseite einzubinden:

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Andere jQuery-Versionen können auf dem Entwickler CDN hier oder z.B. über Google hier geladen werden. Zu beachten, Skriptcode der extern geladen wird übermittelt unter Umständen Browserdaten des Webseite-Besuchers an den externen Service!

jQuery Request synchron absenden

Ein einfacher Ajax-Request erfolgt per Standard asynchron. Dies bedeutet das Daten innerhalb der Webseite zur Darstellungszeit an ein Skript ohne ein Neuladen der Seite erfolgen. Ein einfacher Ajax-Request mit der Übermittlungsmethode POST sieht so aus:

$.post( "https://www.Domainname/skript.php", { variable1: "Wert 1", variable2: "Wert 2" })
  .done(function( data ) {
   alert( "Rückgabe vom Skript: " + data );
 });

siehe: https://api.jquery.com/jquery.post/

Möchte man nun eine 2. jQuery Funktion nach dem erfolgreichen Absenden des Formulars nutzen, kann dies entweder anstelle der alert() Funktion platziert werden oder der Ajax Request synchron abgesendet werden:

$.ajax({
   type: 'POST',
   url: 'https://www.Domainname/skript.php',
   async: false,
   success: function(data){ alert( "Rückgabe vom Skript: " + data ); }
 });

Die Angabe der vollständigen Domain ist optional. In vielen Fällen werden Daten die über das ungesicherte http-Protokoll abgerufen werden nicht auf einer https Seite verarbeitet. Das Laden von Daten externer Domains wird ebenfalls blockiert.

jQuery in WordPress verarbeiten

jQuery kann in den meisten Themes von WordPress ebenfalls verwendet werden. Hierbei sollte jedoch anstelle dem Dollarzeichen die alternative Aufrufweise jQuery() verwendet werden.

$(document).ready(function() {
  $("#meinDiv").hide();
});
->
jQuery(document).ready(function() {
  jQuery("#meinDiv").hide();
});

Javascript Cookie setzen

In manchen Fällen st es notwendig Daten vom Benutzer seitenübergreifend an andere Unterseiten zu übergeben. Dies ist u.a. mit einem Parameter an die Zielseite möglich der dort ausgelesen werden kann oder auch mit einem Cookie der auch durch Javascript gesetzt werden kann.

var xok = "Der Wert der gespeichert werden soll";
document.cookie="Cookiename=" + xok + "; max-age=120; path=/;";

120 bedeutet das der Cookie maximal 120 Sekunden existiert. Soll der Cookie durch Javascript gelöscht werden müsste dieser Code verwendet werden der die Ablaufzeit auf den frühest möglichen Zeitpunkt setzt.

document.cookie = Cookiename + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';