Archiv der Kategorie: AJAX

POST Parameter in JavaScript benutzen

Nachdem der letzte Beitrag wohl etwas irreführend war, hier mal ein Bericht mit dem Ziel, POST Parameter in JavaScript zu benutzen.

Nachdem man ja GET-Parameter relativ leicht auslesen kann, will ich hier nur auf die POST-Parameter eingehen.

Zunächst einmal muss man beschreiben, was denn nun bei einem POST-Request passiert und warum man nicht einfach per JavaScript darauf zugreifen kann.

Ganz kurz: Per POST werden Daten vom Browser (Client) an den Webserver (Server) gesendet, wo diese dann ausgewertet werden können. Der Client “wartet” solange auf Antwort, bis der Server diese sendet. In der ganzen Zeit kann man mit “normalem” JavaScript nix anfangen, da der Client-Code ja noch gar nicht im Browser ist. Sendet der Server nun eine Antwort, so erhält der Browser einfach neue Parameter, ähnlich wie beim GET, nur sind die POST-Paramater nicht zugänglich, weil diese in dem Moment nirgendwo mehr gesetzt sind.
Soviel zur Basis.

“Und wie komme ich nun an die Parameter ran?”
Gute Frage und ebenso leicht zu beantworten. Den POST muss Serverseitig ja irgendeine Serverseitige Scriptsprache entgegennehmen (nehmen wir mal rein zufällig … ähm … PHP) und diese kann dann auf die Eingabe reagieren und eine neue Seite bauen.

Damit ich nun Clientseitig wieder die POST-Daten habe, muss ich mir von PHP aus die POST-Daten irgendwohin in die Antwort an den Browser schreiben, wo JavaScript auch was damit anfangen kann.

Beispiel, ein Kontaktformular (ganz simpel):

<form action="formular.php" method="POST">
<input name="meinname" type="text" />
<input name="senden" type="submit" value="absenden!" />
</form>

Wir möchten nun, nachdem das Formular abgesendet wurde, auf der Antwortseite eine alert-Box aufpoppen lassen, die “Danke, xyz” sagt (ist wirklich ein sehr einfaches Beispiel, oder?)

Okay, der Code für formular.php

<?php if (isset($_POST['meinname'])) { ?>
<script>
var derNameLautet = <?=$_POST['meinname']?>;
alert('Danke, ' + derNameLauetet);
</script>
<?php } ?>

So, nun wird, wenn ein POST vorliegt, der POST-Wert in eine JavaScript Variable geschrieben. Diese kann ich dann für vieles Benutzen, ich hoffe, das Prinzip ist klar.

Aber ich habe einen AJAX-POST, wie mache ich das denn da?
Noch einfacher, der AJAX-POST verlässt ja die Seite nicht, d.h. die Werte, die per POST gesendet wurden, liegen ja noch immer vor und können recht einfach weiterbenutzt werden.

So, diesmal sollte das ganze Prinzip klarer sein, warum ein Auslesen der POST-Variablen in JavaScript mittels

<script>
var meinePOSTVariable = POST[‘postVariable’];
</script>

schlicht nicht möglich ist.

Läuft, läuft nicht, läuft nicht immer …

Eine neue tolle Web-GUI, umgesetzt mit jQuery. AJAX, Bilder, Layout und Farben, alles perfekt abgestimmt, mehrmals auf Funktion getestet, auch auch verschiedenen Rechnern.

Alles super.

Also: Freigabe, Bekanntgabe der URL und auf Lob warten.

Kurze Zeit später, der Endbenutzer am Telefon, in Erwartung von (verdientem) Lob gehe ich ran, nur um zu hören: “Geht nicht!”.

Völlig perplex öffne ich die Seite, alles funktioniert.

HTML lädt, CSS: perfekt, Javascript: vorhanden, jQuery: alles roger.

Woran liegt’s dann?

Fehlerkonsole vom Firefox aufgemacht und siehe da: Eine Fehlermeldung: “console nicht bekannt“ in Zeile xyz”

Cool, ein vergessenes Kommando “console.log”, die uns zu debugzwecken Ausgaben in Firebug liefert, führt nun dazu, dass der Endbenutzer unsere schöne GUI nicht bedienen kann, weil der natürlich nicht Firebug installiert hat. Großes Aha!

Kleine Ursache, lange Suche …

jQuery und der HTML-Head Bereich

Habe grade etwas länger zur Lösung dieses Problems verpulvert und möchte damit allen helfen, die ähnliche Probleme haben.

Ziel war es, über eine Suchfunktion mittels AJAX und jQuery ein neues Tab zu öffnen und dort die Suchinfos darzustellen und zwar ebenso, wie schon bereits vorher angezeigte “festen” Infos dargestellt wurden. Dazu gehörte auch, dass ein Klick auf eine Zeile einen jQuery-Dialog öffnet und dort mehr Informationen angezeigt werden.

Nun, die “normalen” Informationen mit dem jQuery-Dialog anzuzeigen war kein Problem, das Problem entstand, als ein neues jQuery-Tab hinzukam, dass die Ergebnisse der Suche als GET-Request darstellte (jQuery-Tab mit URL als Referenz).

Nach der Durchführung einer Suche funktionierte keine jQuery-Funktion mehr, also öffnete sich kein Info-Fenster.

Nun, ich mache es kurz: Die Lösung ist nun, dass in der Antwort des Requests nicht nur die Daten mit Layout enthalten waren, sondern eine komplette HTML-Seite und diese auch inklusive Bereich. Und dort war wiederrum ein Verweis auf jQuery enthalten; allerdings ohne die Datei, die die ganze jQuery-Logik für diese Seite beinhaltet.

jQuery lädt also neu und “kennt” dannach die Logik für die aktuelle Seite nicht mehr; ergo: Keinerlei Funktion mehr auf der Seite.

Evtl. sollte jQuery hier nachbessern und die im Speicher befindlichen Scripte nicht “vergessen”, wenn es sich selbst neu lädt. Am besten, es läßt sich gar nicht mittels eines neuen Aufrufes von neu laden, denn das störte an dieser Stelle das Vorwärtskommen doch enorm.

So, ich hoffe, ich konnte irgendeinem von euch helfen, so daß ihr nicht allzulange braucht, um eure Problem zu lösen.

Dynamische Daten mit jQuery in eine Textarea schreiben

Beim Versuch, dynamisch nachgeladene Daten in eine Textarea schreiben zu wollen, bin ich auf eine besonderheit der textarea hereingefallen.
Normal funkioniert es ja mit z.B. einem so

$(’span#meinspan‘).html(meinedaten);

Alternativ natürlich auch mit .text.

Okay, nun wollte ich Daten in eine Textarea schreiben:

$(‚textarea#meineta‘).html(meinedaten);

Aber die TA blieb leer. Firebug zeigt zwar an, dass der Inhalt von ‚meinedaten‘ korrekt platziert ist, er wird aber nicht angezeigt. Nanu?

Dann komme ich doch drauf: Die TA wird als Formularfeld behandelt, und alle Formfelder werden nicht mit .html sondern mit .val gesetzt, also so

$(‚textarea#meineta‘).val(meinedaten);

Nun zeigt der Browser alles korrekt an.

Ich habe zwar schon vorher Form-Felder mit val gefüllt, kam aber in bezug auf die TA nicht auf diese Lösung,da ja in einem die Werte in value=““ bereichen stehen, in der TA aber zwischen dem öffnenden und dem schließenden Tag, also käme dort ja das .html richtig.
Naja, Spezialfall eben, merkt es euch und nicht in diese Falle laufen 😉

Automatische Aktualisierungen mit jQuery

Wer mit jQuery arbeitet, der baut sich schnell viele Funktionen, die die Arbeit erleichtern sollen. Leider fehlt jQuery sowas wie ein Timer, der bestimmte Funktionen immer wieder aufruft … der JavaScript Erfahrene Entwickler weiß genau: „Da nehme ich doch setInterval()„.

Genau, und mit setInterval() kann ich auch jQuery Funktionen aufrufen.
Habe ich beispielsweise eine jQuery-Funktion zum AJAX nachladen von Daten wie

jQuery.fn.loadSomething = function()
{
…..// mach was, z.B. einen AJAX-POST oder sowas…
}

dann kann ich in in meiner ready Funktion sowas hier schreiben:

$(document).ready(function()
{
…..setInterval(„$(this).loadSomething();“,30000);
});

Das ruft mir nun alle 30 sekunden meine jQuery-Funktion loadSomething auf, in der ich allerhand Schabernack treiben kann.

Sehr praktisch…

Dynamischen Content mit jQuery an Events binden

Wow, was für ein komplizierter Titel, was?

Es geht um folgendes: Ich erstelle mit jQuery innerhalb eines Bereiches meiner Seite einen dynamischen Inhalt. Als Beispiel: Ich füge in einem Div ein paar Bilder ein, die ich via AJAX auf Knopfdruck lade.

HTML-Teil:

jQuery-Teil:

$(‚div#meinDiv‘).html(‚‚);

Diese Bilder sollen anschließend noch auf das Ereignis einen Klicks reagieren und dann einen neuen Dialog öffnen, wo es ein paar mehr Infos zu diesem Bild gibt … kann sich jeder was unter diesem Beispiel vorstellen? Okay!

Mein Problem war nun, dass ich mit einem simplen:

$(‚img.meineBilder‘).click(function()
{
console.log(‚*PING*‘);
});

Nicht an das gewünschte Ergebnis kam. Es geschah einfach gar nix 🙁

Nach langem stöbern im Netz nun endlich die Erlösung: Es geht doch, und zwar so (nachdem der dynamische Content eingefügt ist):
$(‚img.meineBilder‘).live(‚click‘, function()

{
console.log(‚*PING*‘);
});

Na also, geht doch …

json_encode wandelt Umlaute in null Werte um

Meine AJAX-Antwort enthält null-Daten. Nun, okay, nicht nur null-Daten, aber so ab und zu schon ein paar. Dumm nur, dass in der Abfrage, die hinter den Daten steht, eigentlich keine null-Reihen auftauchen; zumindest sehe ich an der passenden Stelle im phpMyAdmin sowas nicht. Woran liegt es nun?

Zum Ablauf meines AJAX-Requests:
1. Daten zum POST vorbereiten
2. Daten per jQuery.post zum Server POSTen
3. Daten werden auf dem Server verarbeitet, sprich, eine Abfrage an MySQL wird gestartet
4. Antwort wird per json_encode zurückgeschickt
5. Antwort wird per jQuery ausgewertet und angezeigt

Soweit, so gut. Nur in manchen Zeilen fehlen die Daten.
Okay, Firebug auf und den Request mal näher untersucht.
Meine POST Daten stimmen schon mal, also mal sehen, was der Server antwortet. Aha, in der Antwort liegen schon die null-Felder drin, also stimmt der php-Teil nicht.

Ein schnelles debug-printf auf dem Server kurz vor der Rückgabe zeigt mir an, dass die Abfrage und die Antwort stimmt. Na gut, dann habe ich den Fehler.

Die PHP-Funktion json_encode wandelt alle Strings mit Umlauten in null Daten um. In der Doku zu json_encode steht es ja auch:

Diese Funktion arbeitet nur mit UTF-8-kodierten Daten.

Ich muss also die Eingangsdaten der Funktion json_encode entsprechend UTF-8 konvertieren. Kein Problem, die Funktion utf8_encode hilft mir da weiter und siehe da: Nun funktioniert es wunderbar.

Wieder was gelernt.