Eigentlich wollte ich mal eben ein neues, kleines Plugin basteln. Aber, wie sollt es auch anders sein, habe ich dabei die goldene Regel vergessen, nach der sich grundsätzlich nie Dinge eigentlich mal eben machen lassen. Es artet entweder in Arbeit oder in einer Katastrophe aus.
Jedenfalls, ich hatte gestern Abend die Idee zu einem netten Spenden-Plugin für WordPress, welches den aktuellen Stand in grafischer Form ausgibt. Zusätzlich sollten die Spender in einer Datenbanktabelle verwaltet werden.
Hört sich alles noch sehr einfach an. Mit der grafischen Anzeige war ich auch sehr schnell fertig. Die gefundene Lösung arbeitet mit zwei Bilder, von denen eines nur eine Deckkraft von zehn Prozent besitzt. Es wird mit jeder Spende von unten aufgefüllt.
Erst im Laufe des heutigen Tages ist mir klar geworden, dass nicht die Ausgabe das eigentlich Problem ist, sondern die GUI für die Eingabe. Das Hinzufügen der Spender soll nämlich nach Möglichkeit kein Neuladen der gesamten Seite im Adminbereich von WordPress notwendig machen. Wer mit WordPress 2.x arbeitet, kennt sicher auch die Option, während des Schreibens eines Artikels eine neue Kategorie hinzuzufügen. Genau so sollte das mit den Spendern funktionieren.
Wie meistens bei Probleme teilt sich ein etwas größeres recht schnell in mehrer kleinere auf. Zeit also, das angelesen AJAX-Wissen auch mal in die Praxis umzusetzen. Jeder Spender, und damit sind wir dann beim Titel, ist ein neuer Knotenpunkt. Im Trockendock, ohne HTTPRequest sieht ein möglicher Lösungsansatz folgendermaßen aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Sterntaler</title>
<script type="text/javascript">
//<![CDATA[
function adinfo()
{
var zielelement = document.getElementById('inhalt');
var reihe = document.createElement("tr");
var felder = new Array('myname','myurl','mysum');
var text;
for(i=0;i<felder.length;i++) {
text=document.getElementById(felder[i]).value;
var spalte = document.createElement("td");
var inhalt = document.createTextNode(text);
spalte.appendChild(inhalt);
reihe.appendChild(spalte);
}
zielelement.appendChild(reihe);
}
//]]>
</script>
</head>
<body>
<h1 id="rudi">Spendengala</h1>
<table id="inhalt" style="border: 1px solid #cccccc;">
</table>
<p>
<input name="name" id="myname" type="text" size="23" />
<input name="url" id="myurl" type="text" size="23" />
<input name="sum" id="mysum" type="text" size="23" />
<a href="javascript:adinfo();">neue Zeile</a>
</p>
</body>
</html>
Wer neugierig ist, wie das funktioniert, kann den Code in ein neues Dokument kopieren, dieses als HTML-Datei abspeichern und es dann im Browser aufrufen.
Für mich sieht es so aus, als ob ich damit die erste Hürde genommen habe. Eigentlich.
4 Kommentare
ich wollte mich auch mit ajax beschäftigen, genauer mit moo.ajax, aber ich hab gar keine peilung von httprequests und was ich da gelesen habe war total umständlich.
hoffe für dich auf gutes gelingen!
Und wenn du noch ein Formular verwendest, dann kannst du mit onSubmit die Funktion aufrufen und gleichzeitig z.B. eine PHP-Datei füttern.
Formulare finde ich ein wenig eleganter und praktischer für Eingaben als Links zum anklicken.
@Ralf: Ist in Arbeit. Mit der Anbindung an PHp bin ich auch fast durch. Falls jemand eine Lesetipp möchte: Sehr zu empfehlen ist das AJAX-Buch von Galileo-Computing.