Archiv der Kategorie: jQuery

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.