ProcessWire Upload Formular mit AJAX: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „Basiert auf dem Beispiel in diesem Artikel ProcessWire Upload Formular“) |
|||
| Zeile 1: | Zeile 1: | ||
Basiert auf dem Beispiel in diesem Artikel | Basiert auf dem Beispiel in diesem Artikel | ||
[[ProcessWire Upload Formular]] | [[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. | ||
| + | <syntaxhighlight lang="html5"> | ||
| + | <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 1 - AJAX Versand == | ||
| + | main.js | ||
| + | <syntaxhighlight lang="javascript"> | ||
| + | |||
| + | </syntaxhighlight> | ||
Version vom 11. Februar 2019, 10:52 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 1 - AJAX Versand ==
main.js
<syntaxhighlight lang="javascript">
