ProcessWire Upload Formular mit AJAX: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 11: | Zeile 11: | ||
== Schritt 1 - Formular anpassen == | == Schritt 1 - Formular anpassen == | ||
* Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button. | * Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button. | ||
| + | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div class="row"> | <div class="row"> | ||
| Zeile 16: | Zeile 17: | ||
</div> | </div> | ||
</sytaxhighlight> | </sytaxhighlight> | ||
| + | |||
* JavaScript Datei für AJAX Versand hinzufügen | * JavaScript Datei für AJAX Versand hinzufügen | ||
| + | |||
<pre> | <pre> | ||
$additionalFooterData .= ' | $additionalFooterData .= ' | ||
| Zeile 23: | Zeile 26: | ||
</pre> | </pre> | ||
| − | == Schritt | + | == Schritt 2 - AJAX Verarbeiten == |
main.js | main.js | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 11. Februar 2019, 10:53 Uhr
Basiert auf dem Beispiel in diesem Artikel
ProcessWire Upload Formular
Siehe auch:
JQuery - AJAX
Wir erweitern das Beispiel folgendermaßen:
- Formulardaten über jQuery AJAX Funktionen abschicken
- ProcessWire AJAX Antwort verarbeiten
Schritt 1 - Formular anpassen
- Unsichtbare Box für evtl. Fehlermeldungen direkt unter dem Submit Button.
<div class="row">
<div class="message-box" style="display:none;"></div>
</div>
</sytaxhighlight>
* JavaScript Datei für AJAX Versand hinzufügen
<pre>
$additionalFooterData .= '
<script src="'.urls()->templates.'partials/basic-upload-ajax/main.js"></script>
';
</pre>
== Schritt 2 - AJAX Verarbeiten ==
main.js
<syntaxhighlight lang="javascript">
