Wikizone - Benutzerbeiträge [de]

JQuery - AJAX

2020-09-19T12:52:31Z

84.157.18.5: /* Kommunikation mit dem Server über AJAX und jQuery */

== Wie funktioniert AJAX ? ==

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten '''XML-HTTP Request''' oder kurz '''XHR'''. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von '''A'''synchronous '''J'''avaScript '''a'''nd '''X'''ML - AJAX

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

==jQuery und AJAX==
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

== Datenanforderung mit jQuery und AJAX ==
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
=== Textdatei anfordern ===
ajax1.html
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

ajax.txt
<pre>
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
</pre>

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen.
Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

=== HTML Anfordern ===
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
<pre>
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
</pre>

== Kommunikation mit dem Server über AJAX und jQuery ==
'''ajax.html'''
<syntaxhighlight lang="html5">
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</syntaxhighlight>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.
1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

'''login_get.php'''
<syntaxhighlight lang="html5">
<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}

mysql_close ($dbverbindung);
?>
</syntaxhighlight>
Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
</pre>

== Kommunikation über JSON ==
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

=== JSON - Daten ===
So sieht es aus.

'''ajax.json'''
<pre>
{
"name" : "Stephan Schlegel",
"beruf" : "Dipl Ing audiovisuelle Medien",
"ort" : "Nürtingen",
"webseiten" : {
"url1" : "www.geo-bit.de",
"url2" : "www.3d-relief.com",
"url3" : "www.ko-rockband.de"
}
}
</pre>

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

=== JSON Daten über jQuery lesen ===
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getJSON("ajax.json", function(data){
$("#ausgabe").append(data.name + ", " + data.webseiten.url1);
});
});
});
</script>
</head>
<body>
<button>getJSON</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Die Daten werden über getJSON geladen:
$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

==== Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each ====

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

<pre>
...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
//mapData = data;
createMapSelector(data);
});
...
</pre>

Übergeben wird das Data Objekt an diese Funktion

<pre>

function createMapSelector(data){
$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
$("#map_selector").append('<option value="na">Select product to view details</option>');
$.each(data,function(key,obj){
if(obj.products_name != null)
$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
});
$("#map_selector_wrap").append('</select></div>');
// click handler for selector
$("#map_selector").change(function(){
actID=$("#map_selector option:selected").val()
if(actID != "na")
loadMap(actID);
});
}

</pre>

=== JSON Daten Senden ===
Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden

http://stackoverflow.com/questions/10955017/sending-json-to-php-using-ajax

Für Typo3 Extensions evtl. stringify machen und als POST DAten schicken statt als JSON Objekt, damit die Daten valide sind.

=== JSON Daten von fremden Servern ===
Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen.
Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

[[jQuery und JSONP - Tweets von Twitter lesen]]

siehe auch nächstes Beispiel "JavaScript" nachladen.

=== JavaScript nachladen ===
Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht.
So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

<pre>
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</pre>

'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getScript("zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
$("button:last").click(function(){
$.getScript("http://mydomain.de/jquery/zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
});
</script>
</head>
<body>
<button>Lade Skript von gleicher Domain</button>
<button>Lade Skript von fremder Domain</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

'''zufall.js'''
<pre>
function zufallsZahl(){
return Math.random();
}
</pre>

== AJAX Probleme lösen ==
=== IE schickt Daten nicht ab ===
Im IE gibt es ab und zu Probleme mit dem Cache. Es gibt einige Lösungsansätze.

==== Lösung bei Wetzel Auto Erfalssung ====
Von $.get auf $.ajax umgestellt und cache deaktiviert. Hat noch nicht funktioniert. Erst die Umstellung auf post hat geklappt.
<pre>
// Replace Get because of IE Bug
$.ajax({
url: "ajax.php",
cache: false,
data: {
'output': str,
'action': "save"
},
datatype: "json",
type: "POST"
}).done(function(data) {
if(data["success"]){
showMessage("Fahrzeug wurde gespeichert");
getItems();
}
if(!data["success"]){
showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
}
});

/*
$.get(
'ajax.php',{
'output': str,
'action': "save"
}
).done(function(data){
if(data["success"]){
showMessage("Fahrzeug wurde gespeichert");
getItems();
}
if(!data["success"]){
showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
}
});
*/

</pre>
==== Weitere Tipps ====
http://stackoverflow.com/questions/4303829/how-to-prevent-jquery-ajax-caching-in-internet-explorer

Das ist ein Nachbau von dem was der cache:false Parameter von jQuery tut. Er hängt einen uniq_param an, damit sich die URL ständig ändert.
<pre>
$.ajax({
url : "my_url",
data : {
'uniq_param' : (new Date()).getTime(),
//other data
}});
</pre>

JQuery - AJAX

2020-09-19T12:51:36Z

84.157.18.5: /* Kommunikation mit dem Server über AJAX und jQuery */

== Wie funktioniert AJAX ? ==

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten '''XML-HTTP Request''' oder kurz '''XHR'''. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von '''A'''synchronous '''J'''avaScript '''a'''nd '''X'''ML - AJAX

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

==jQuery und AJAX==
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

== Datenanforderung mit jQuery und AJAX ==
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
=== Textdatei anfordern ===
ajax1.html
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

ajax.txt
<pre>
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
</pre>

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen.
Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

=== HTML Anfordern ===
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
<pre>
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
</pre>

== Kommunikation mit dem Server über AJAX und jQuery ==
'''ajax.html'''
<syntaxhighlight lang="html5">
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</syntaxhighlight>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.
1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

'''login_get.php'''
<pre>
<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}

mysql_close ($dbverbindung);
?>

Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
</pre>

== Kommunikation über JSON ==
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

=== JSON - Daten ===
So sieht es aus.

'''ajax.json'''
<pre>
{
"name" : "Stephan Schlegel",
"beruf" : "Dipl Ing audiovisuelle Medien",
"ort" : "Nürtingen",
"webseiten" : {
"url1" : "www.geo-bit.de",
"url2" : "www.3d-relief.com",
"url3" : "www.ko-rockband.de"
}
}
</pre>

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

=== JSON Daten über jQuery lesen ===
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getJSON("ajax.json", function(data){
$("#ausgabe").append(data.name + ", " + data.webseiten.url1);
});
});
});
</script>
</head>
<body>
<button>getJSON</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Die Daten werden über getJSON geladen:
$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

==== Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each ====

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

<pre>
...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
//mapData = data;
createMapSelector(data);
});
...
</pre>

Übergeben wird das Data Objekt an diese Funktion

<pre>

function createMapSelector(data){
$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
$("#map_selector").append('<option value="na">Select product to view details</option>');
$.each(data,function(key,obj){
if(obj.products_name != null)
$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
});
$("#map_selector_wrap").append('</select></div>');
// click handler for selector
$("#map_selector").change(function(){
actID=$("#map_selector option:selected").val()
if(actID != "na")
loadMap(actID);
});
}

</pre>

=== JSON Daten Senden ===
Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden

http://stackoverflow.com/questions/10955017/sending-json-to-php-using-ajax

Für Typo3 Extensions evtl. stringify machen und als POST DAten schicken statt als JSON Objekt, damit die Daten valide sind.

=== JSON Daten von fremden Servern ===
Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen.
Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

[[jQuery und JSONP - Tweets von Twitter lesen]]

siehe auch nächstes Beispiel "JavaScript" nachladen.

=== JavaScript nachladen ===
Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht.
So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

<pre>
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</pre>

'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getScript("zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
$("button:last").click(function(){
$.getScript("http://mydomain.de/jquery/zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
});
</script>
</head>
<body>
<button>Lade Skript von gleicher Domain</button>
<button>Lade Skript von fremder Domain</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

'''zufall.js'''
<pre>
function zufallsZahl(){
return Math.random();
}
</pre>

== AJAX Probleme lösen ==
=== IE schickt Daten nicht ab ===
Im IE gibt es ab und zu Probleme mit dem Cache. Es gibt einige Lösungsansätze.

==== Lösung bei Wetzel Auto Erfalssung ====
Von $.get auf $.ajax umgestellt und cache deaktiviert. Hat noch nicht funktioniert. Erst die Umstellung auf post hat geklappt.
<pre>
// Replace Get because of IE Bug
$.ajax({
url: "ajax.php",
cache: false,
data: {
'output': str,
'action': "save"
},
datatype: "json",
type: "POST"
}).done(function(data) {
if(data["success"]){
showMessage("Fahrzeug wurde gespeichert");
getItems();
}
if(!data["success"]){
showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
}
});

/*
$.get(
'ajax.php',{
'output': str,
'action': "save"
}
).done(function(data){
if(data["success"]){
showMessage("Fahrzeug wurde gespeichert");
getItems();
}
if(!data["success"]){
showMessage("Fehler - Fahrzeug wurde NICHT gespeichert");
}
});
*/

</pre>
==== Weitere Tipps ====
http://stackoverflow.com/questions/4303829/how-to-prevent-jquery-ajax-caching-in-internet-explorer

Das ist ein Nachbau von dem was der cache:false Parameter von jQuery tut. Er hängt einen uniq_param an, damit sich die URL ständig ändert.
<pre>
$.ajax({
url : "my_url",
data : {
'uniq_param' : (new Date()).getTime(),
//other data
}});
</pre>

ProcessWire - Wireframe API

2020-09-19T05:32:01Z

84.157.18.5: Die Seite wurde neu angelegt: „ https://processwire.com/talk/topic/21893-wireframe/page/3/?tab=comments#comment-205320 http://wireframe-framework.com == Snippets == === Beispiel von Bernha…“

https://processwire.com/talk/topic/21893-wireframe/page/3/?tab=comments#comment-205320
http://wireframe-framework.com

== Snippets ==
=== Beispiel von Bernhard Baumrock ===
Homepage View
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
echo Wireframe::component("Header");
echo Wireframe::component("Search");
echo Wireframe::component("Slider");
echo Wireframe::component("Welcome");
echo Wireframe::component("Visions");
echo Wireframe::component("News");
echo Wireframe::component("Quotes");
echo Wireframe::component("Newsletter");
echo Wireframe::component("Partner");
echo Wireframe::component("Footer");
</syntaxhighlight>

i.e. welcome component
<syntaxhighlight lang="php">
<?php namespace Wireframe\Component;
class Welcome extends \Wireframe\Component {
public function __construct() {
$this->setBg();
$this->setEmblem();
}
private function setBg() {
$this->bg = null;
try {
$item = $this->wire->gg->home()->get(HomePage::field_slider)->first();
$img = $item->get(Slideritem::field_img);
$this->bg = $item->imgUrl($img);
} catch (\Throwable $th) {
$this->log($th->getMessage());
}
}

private function setEmblem() {
$this->emblem = null;
$img = $this->wire->gg->settings()->get(HomePage::field_emblem_white);
if(!$img) return;
$this->emblem = "<img class='tm-emblem uk-margin-large-left' src='{$img->maxHeight(100)->url}' uk-svg>";
}
}
</syntaxhighlight>

Processwire - Themes / Templates

2020-09-19T05:28:39Z

84.157.18.5:

== Links ==
Siehe auch
* [[Processwire - Templates Grundausstattung]] (Best Practice)
* [[ProcessWire - Field Rendering]]
* [[ProcessWire - Skeleton Template]]
* [[Processwire - Template from Scratch]]
* https://processwire.com/blog/posts/pw-3.0.141/#processwire-system-urls-paths-now-more-customizable (Interessant für vo Backend wählbare Themes)

== Template Strategien - Output Strategies ==
https://processwire.com/docs/tutorials/how-to-structure-your-template-files/
https://processwire.com/talk/topic/21893-wireframe/page/3/?tab=comments#comment-205320
http://wireframe-framework.com

Es gibt in ProcessWire im Wesentlichen mehrere grundlegende Strategien um HTML Inhalte auszugeben:
* Direct Output
* Delayed Output
* Markup Regions ([[ProcessWire - Markup Regions]])
Außerdem gibt es für MVC basierte Ansätze das Wireframe Framework. Über die Wireframe API lassen sich z.B. gut Komponentenbasierte Webseiten, JSON Endpoints... realisieren.

=== Direct Output ===
Die Inhalte im Template werden direkt als Markup ausgegeben.
<pre>
<html>
<head>
<title><?php echo $page->title; ?></title>
</head>
<body>
<h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>
</body>
</html>
</pre>
==== Direct Output mit Includes ====
Teile die man oft benötigt kann man in andere Dateien verlagern.
<pre>
<?php
include("./head.inc");
echo $page->body;
include("./foot.inc");
</pre>

==== Direct Output mit automatic inclusion ====
==== Automatic Inclusion ====
Über die ProcessWire Konfiguration prependTemplateFile und appendTemplateFile kann man automatisch bestimmte Templates einbinden .
In der config.php definiert man:
$config->prependTemplateFile = 'head.inc';
$config->appendTemplateFile = 'foot.inc';
Dann kann man im Template einfach schreiben:
echo $page->body;
head.inc und foot.inc werden automatisch hinzugefügt.

=== Delayed Output ===
Mit Delayed Output meint man, dass beim Rendering Teile des Inhalts zunächst in Variablen gespeichert werden. Am Ende wenn alle Teilbereiche gerendert sind werden die Inhalte zusammengefügt (delayed)

basic-page.php
<pre>
<?php
$headline = $page->get("headline|title");
$bodycopy = $page->body;
$sidebar = $page->sidebar;
include("./main.inc");
</pre>
In main.inc werden die Variablen dann verwendet
<pre>
<html>
<head>
<title><?php echo $headline; ?></title>
</head>
<body>
<div id='bodycopy'>
<h1><?php echo $headline; ?></h1>
<?php echo $bodycopy; ?>
</div>
<div id='sidebar'>
<?php echo $sidebar; ?>
</div>
</body>
</html>
</pre>

==== Delayed Output mit automatic inclusions ====
Oft (aber nicht immer) bietet sich auch an Teile automatisch zu inkludieren.

TODO

=== Markup Regions ===
Kombiniert die Vorteile der vorigen Strategien. Werden per Include (oder über die Funktionen für das Delayed Output) Template Dateien verknüpft, werden die Inhalte gleichnamiger id Container ersetzt oder mit Hilfe von pw- Klassen kombiniert bzw. bearbeitet.

=== Wireframe API ===
[[ProcessWire - Wireframe API]]

== Allgemeine Tipps ==
Es gibt verschiedene Orte wo man Teilrenderings vornehmen kann. Wenn man sich keine Strategie zurechtlegt kann man schnell die Übersicht verlieren. Hier ein paar Vorschläge:
* Partials im partials Ordner sind für einfache Dinge geeignet und gerade beim Entwurf sehr schnell. Hier lege ich Codeblöcke an die direkt (per echo oder direkt als HTMl) ausgegeben werden. Es gibt keine Rückgaben über return. Partials sind Views. Also auf Funktionen weitgehend verzichten. Ausnahmen sind z.B. foreach Schleifen auf Felder (zumindest solange ohne Template Engine gearbeitet wird).
* Partials Dateien enden auf .inc
* In Komplexeren Projekten sollte auf sauberer Model View Controller Trennung geachtet werden.
* Layoutblöcke für Redakteure kommen z.B. in den Field Bereich. Hier kann man die Renderreihenfolge von PW ausnutzen.

== Datei Strategien ==
Wo legt man am Besten Dateien und Ordner an.
=== Basic Theme ===
<syntaxhighlight lang="php">
</syntaxhighlight>

<pre>
templates/
_func.inc (wenn benötigt)
home.php
basic_page.php
templates/partials
foot.inc
head.inc
</pre>

=== Layout Blocks (BEST PRACTICE)===
Dies ist meine (Steffs) selbstentwickelte Strategie um vielfältige Inhalte auch einem nicht Programmierer im Backend zu ermöglichen und sie dann im Frontend auszugeben.)
Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in '''Layout-Blöcken''' zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der '''Feldtyp RepeaterMatrix''' an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht
[[ProcessWire - Layout Blöcke mit RepeaterMatrix]]
[[Processwire - Flexible Content Type]]

== Rendering Strategien ==
=== Beispiele ===
http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
=== Render Funktionen ===
https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue

<syntaxhighlight lang="php">
// New Functions in 3.x
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));
</syntaxhighlight>
=== Delayed Output and Advanced Templates ===

'''Ordnerstruktur'''
<pre>
templates/
_func.inc
_init.inc
_main.inc
templates/partials
foot.inc
head.inc
</pre>

'''config.php'''
<syntaxhighlight lang="php">
<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
'upscaling' => true, // upscale if necessary to reach target size?
'cropping' => true, // crop if necessary to reach target size?
'autoRotation' => true, // automatically correct orientation?
'sharpening' => 'soft', // sharpening: none | soft | medium | strong
'quality' => 90, // quality: 1-100 where higher is better but bigger
);
</syntaxhighlight>

=== AJAX Driven Theme ===
config.php
// if ajax request set
$ajax = $input->post->ajax;

=== Markup Regions ===
Seit Version 3.0 die neueste Rendering Strategie. Hier werden Divs mit ids automatisch zu editierbaren Bereichen, die mit passenden Feldern im Backend befüllt werden.

[[Processwire - Markup Regions]]

== Syntax und Konventionen ==

== Module ==
[[Processwire - Writing Modules]]
=== Recommended Modules ===
<pre>
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify
</pre>

== Grundausstattung ==
Siehe [[Processwire - Templates Grundausstattung]]

== Tipps und Tricks ==
=== Templates in Backend-Auswahl verstecken ===
Manche Templates tauchen in der Auswahl der Redakteure auf obwohl es eigentlich nur Teiltemplates sind. Z.B. für eine Matrix.
Benennt man sie mit einem '''Underscore am Anfang _NameDesTemplates''' tauchen sie nicht mehr in der Auswahlliste auf.