Faddie bloggt – schon wieder!

Dojo Tutorial mit Grid – Teil 4: Grid updaten

Wir sind in den vorherigen Teilen soweit gekommen, dass wir ein Grid darstellen können und per Ajax mit dem Server kommunizieren können. Was noch fehlt, ist die Antwort vom Server an das Grid weiterzuleiten – noch geben wir die Antwort nur mit einem simplen Alert aus.

Wer noch nicht aufgegeben hat, klickt sich weiter durch

Wir benötigen zu der createGrid- Funktion noch eine update-Funktion. Diese sieht der create-Funktion sehr ähnlich:

function updateGrid(meineDaten) {
	store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: meineDaten});
	ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { lfdnr: '*' }});
	grid.setModel(ddata);
	grid.update();
}

Leider kann ein ReadStore meines Wissens zur Zeit noch nicht aktualisiert werden, daher müssen wir ihn neu erstellen. Daraufhin erstellen wir auch das Modell für das Grid neu und weisen diesem das neue Modell zu. Als letztes veranlassen wir, dass das Grid sich aktualisiert.

Ich muss zu meiner Schande gestehen, dass es sich hier nicht um den Königsweg handelt. Falls jemand eine bessere Lösung findet, würde ich mich über eine Nachricht freuen. Fakt ist jedoch, dass diese Methode am einfachsten nachzuvollziehen ist und vor allem funktioniert.

Unsere Update-Funktion binden wir nun einfach in die “mein_submit()” Funktion ein und schon sind wir fertig. Die “mein_submit()” sieht nun so aus:

function mein_submit (event) {
	dojo.stopEvent(event);
	var kw = {
		url: "gridtut_request.php",
		load: function(data){
				var ergebnis = eval('('+data+')');
				updateGrid(ergebnis);
		},
		error: function(data){
		        alert("Es ist ein Fehler aufgetreten: " + data);

		},
		form: "form_suche"
	};
	dojo.xhrPost(kw);
}

Schauen wir noch einmal auf den Load-Abschnitt. Die eval-Funktion generiert uns aus dem Text-String vom Webserver ein Javascrip Objekt, das wir nun an die Update-Funktion übergeben. Um den Rest kümmert sich Dojo.

Fertig … so könnte man meinen. Aber bisher haben wir ja auch nur nach “Petersen” gesucht. Was passiert bei “Schröder”?

Wer mir gefolgt ist und kein UTF-8 verwendet hat, bekommt nun ein Problem. Umlaute per Ajax übertragen ging zwar noch in der Version 0.4. Aber 0.9 – 1.0.2 wollen uns erziehen und haben das abgeschaltet (oder es ist ein Bug)

Nun wäre es aber ein gehöriger Entwicklungsaufwand, eine komplette Anwendung auf UTF-8 umzustricken, daher wandeln wir einfach den Inhalt des Input-Feldes in HTML-Entitäten (die Dinger mit ä ; ).

Daraus ergibt sich dann wiederum das Problem, dass wir in der Ajax-Funktion “mein_submit” nicht mehr mit der “form” Eigenschaft arbeiten können, sonder “content” verwenden müssen – aber dazu später.

Hier als erstes die Funktionen, in Javascript Umlaute in HTML-Entitäten umzuwandeln (und zurück)

function htmlToUmlaut(text) {
	text=text.split(">").join(">").split("<").join("<").split("ü").join("ü").split("ö").join("ö").split("ä").join("ä").split("Ü").join("Ü").split("Ö").join("Ö").split("Ä").join("Ä").split("ß").join("ß");
	return text;
}

function htmlFromUmlaut(text) {
	text=text.split(">").join(">").split("<").join("<").split("ü").join("ü").split("ö").join("ö").split("ä").join("ä").split("Ü").join("Ü").split("Ö").join("Ö").split("Ä").join("Ä").split("ß").join("ß");
	return text;
}

Jetzt die angepasste “mein_submit” Funktion, zur Übersichtlichkeit diesmal besser kommentiert.

// Die neue Submit-Funktion
function mein_submit (event) {
	// Den Standard-Submit und das Verlassen
	// der Seite verhindern
	dojo.stopEvent(event);
	// das Textfeld auslesen
	var textfeld_name = dijit.byId("txt_name").getValue();
	// Prüfen, ob das Textfeld leer ist
	if (textfeld_name =='') {
		alert ('Sie müssen einen Namen eintragen');
		return false;
	}
	else {
		// Umlaute in HTML-Entitäten konvertieren
		textfeld_name = htmlFromUmlaut(textfeld_name);
		// Parameter für asynchrone Übertragung (Ajax)
		var kw = {
			// Hier liegt die dynamische Seite
			url: "gridtut_request.php",
			// wird bei Server-Antwort aufgerufen
			load: function(data){
					// Server-String auswerten und Grid updaten
					var ergebnis = eval('('+data+')');
					updateGrid(ergebnis);
			},
			// wird bei Server-Fehler aufgerufen
			error: function(data){
			        alert("Es ist ein Fehler aufgetreten: " + data);

			},
			// Werte, die übertragen werden
			content: {  txt_name: textfeld_name,
						js_aktiv: 'ja'}
		};
		dojo.xhrPost(kw);
	}
}

Das Textfeld, das wir verwendet haben, ist ja ein sogenanntes Dijit. Diesen Umstand können wir uns zu nutze machen und mit der Funktion “dijit.byId(“txt_name”).getValue” den Wert aus dem Textfeld holen. Es gibt übrigens auch noch ein setValue, nicht verwechseln sollte man übrigens dijit.byId (für Dojo Widgets) und dojo.byId (für HTML-Elemente).
In diesem Fall bräuchte man natürlich nicht zwingend mit getValue arbeiten, da das Textbox-Dijit ja nur ein hübsches HTML <input> Element ist. Bei dem FilteringSelect Dijit sähe das anders aus, das ist nämlich auch ein <input> Element, das ein Drop-Down simuliert… aber ich schweife schon wieder ab

Also wir holen den Wert mit getValue, prüfen ob was drin steht und wenn ja, konvertieren wir noch die Umlaute.

Bei den Keywords von xhrPost verwenden wir anstelle von “form” die Eigenschaft “content”. Vor den Doppelpunkt schreiben wir, wie die Variable heißen soll, die an den Server übertragen wird, dahinter den Wert. Da wir das HTML-Element mit der Eigenschaft “name” schon “txt_name” genannt haben, sollten wir das hier auch so beibehalten. Dann müssen wir serverseitig nichts ändern. Als nächstes Wertepaar habe ich noch js_aktiv mit dazu geschrieben und auf “ja” gesetzt.

Wir erinnern uns: die Seite soll auch ohne Javascript einigermaßen funktionieren. Der Parameter “js_aktiv” kann nur an den Server übertragen werden, wenn Javascript auch wirklich aktiv ist. Sonst wird der Parameter nicht an der Server gesendet. So können wir es serverseitig einrichten, dass ohne Parameter eine HTML-Tabelle zurückgegeben wird und mit Parameter der JSON-String.

Wichtig: Bei “content” möglichst auf Sonderzeichen verzichten, selbst ein Bindestrich führt zu einem Fehler (“js-aktiv” geht nicht) Das Leben als Javascript-Entwickler ist hart

Hier nun der veränderte PHP-Code, um zwischen Javascript und nicht-Javascript Browsern zu unterscheiden

	// Ist Javascript für den Browser aktiv?
	if (isset($_REQUEST['js_aktiv'])) {
		// Das Array für das Dojo-Grid aufbereiten
		$temp = Array ('identifier'=>'lfdnr', 'items'=>$ergebnis);
		echo json_encode($temp);
	}
	// Anzeige ohne Javascript
	else {
		echo "<table>\n";
		echo "<tr><td>Kundennummer</td>
				<td>Vorname</td>
				<td>Nachname</td>
				<td>Beruf</td>
				<td>Alter</td>";
		echo "</tr>\n";
		foreach ($ergebnis as $zeile => $wert) {
			echo "<tr>";
			echo "<td>".$wert['lfdnr']."</td>";
			echo "<td>".$wert['vname']."</td>";
			echo "<td>".$wert['nname']."</td>";
			echo "<td>".$wert['beruf']."</td>";
			echo "<td>".$wert['alter']."</td>";
			echo "</tr>\n";
		}
		echo "</table>\n";
	}

Wenn wir immer noch gut sind, sieht die Seite jetzt schon so aus:

Step-7 zum Runterladen: step7-gridtut.js step-7-gridtut_request.php

Im nächsten Teil geht’s dann darum, noch so einen coolen Ajax-Indikator einzubauen. Bis dahin…