Formularfelder via Ajax laden
Im folgenden Beispiel wird dem Besucher der Seite eine Reihe von verfügbaren Terminen angeboten. Die Termine sind in einer CSV-Datei definiert und werden dem Besucher abhängig von dessen Datumsangaben angeboten.
Konfiguration der Formularelemente
Das Formular enthält ein Kalender-Eingabefeld.
Wählt der Seitenbesucher ein Datum aus, werden dynamisch Radiobuttons mit verfügbaren Terminen angeboten.
Die Radiobuttons erhalten einen Wert, der als Referenz für die Weiterverarbeitung des Ajax-Resultates dient.
onChange-Event via Javascript, Ajax-Aufruf
Ändert sich der Inhalt des Kalenderfeldes wird das Event "wOnAfterChangeDate()" ausgeführt.
Das Event kann in der design.js (für alle Seiten) oder nur in der aktuellen Seite über das Javascript-Quelltext-Element eingefügt werden.
Innerhalb des Events, wird nun via Ajax ein projekspezfisches PHP-Script aufgerufen, welches den HTML-Code für die Inputfelder schreibt und als String zurückgibt.
Event, das nach Auswahl über das Datumsfeld ausgeführt wird
function wOnAfterChangeDate(date){ //Datumswert var dateVal = date.val(); //Formularfeldname var elementName = 'myRadio'; //Url des PHP-Scriptes, das die Inputfelder generiert var url = '/wGlobal/wGlobal/scripts/php/getRadioValues.php?date=' + dateVal + '&elementName=' + elementName; //JQueryAufruf jQuery.ajax({type: "GET", url: url, success: function(result){ if(result != ''){ //Ersetzen des bestehenden Radiobuttons. jQuery('#myRadio_').parent().replaceWith(result); } }}); }
Notwendiges PHP-Script
Innerhalb des PHP-Scriptes (/wGlobal/wGlobal/scripts/php/getRadioValues.php) werden die Radio-Buttons zusammengebaut und als HTML-String zurückgegeben.
Bitte beachten Sie, dass u.a. Beispiel nicht, den Status oder die Zulässigkeit der Abfrage prüft. Ggf. müssen weitere Sicherheitsabfragen oder das Ausschließen von unerlaubten Zugriffen in der Syntax ergänzt werden.
Scriptbeispiel
include_once($_SERVER['DOCUMENT_ROOT'].'/weblication/grid.php');
error_reporting(0);
/**
*
Bitte beachten Sie, dass dieses Script für alle Benutzer aufrufbar ist.
Sicherheitsmaßnahmen wurden bei diesem Beispiel nicht berücksichtigt
*
**/
if(session_id() == '') die();
//Initialisieren der Variablen
$dateValue = wRequest::getParameterSecureStrict('date');
$elementName = wRequest::getParameterSecureStrict('elementName');
$csvFilePath = '/dev-wAssets/docs/beispieldaten.csv';
$html = '';
//Auslesen der Informationen, die für das Datum geschrieben werden sollen.
//In diesem Beispiel werden die Daten aus einer CSV ausgelesen.
if($dateValue != '' && wRepository::documentExists($csvFilePath)){
//Auslesen der CSV-Datei in ein Array
$data = wReadWrite::readFileCSVArray($csvFilePath) ?? array();
//Schreiben des HTML-Strings, hier Radiobuttons
for($i = 0; $i < count($data); $i++){
if($data[$i]['date'] === $dateValue){
$data[$i]['name'] = $data[$i]['name'] ?? '';
$html .= '<span class="wglRadio">
<input type="radio" id="'.$elementName.'_'.$data[$i]['name'].'" name="'.$elementName.'" value="'.$data[$i]['name'].'">
<label for="'.$elementName.'_'.$data[$i]['name'].'">'.$data[$i]['name'].'</label>
</span>';
}
}
}
print $html;