Schlagwörter-Archiv: jquery

jQuery.find() mit Doppelpunkt im Tag

Veröffentlicht am von — Keine Kommentare ↓

jQuery eignet sich hervorragend zum Parsen von RSS-Feeds bzw. von XML-Dokumenten im Allgemeinen:

var xml = $(data); //wobei data ein XML-String bspw. eines RSS-Feeds ist

Allerdings kommt es bei der Verwendung von Tags mit Doppelpunkten (evtl. auch bei anderen Sonderzeichen) zu Komplikationen, sofern man einzelne Nodes des XML-Strings via jQuery.find() auslesen möchte. Umgehen lässt sich dass, indem der Parameter (in diesem Fall der Name des Tags) escaped wird:

xml.find("foo\\:bar").text();

Allerdings ist diese Problemlösung inkompatible mit Webkit-Browsern. Abhilfe schafft es, den ersten Teil des Tags zu ignorieren:

xml.find("bar");

In Kombination ergibt das:

var xml = $(data);
if (xml.find('bar').length === 0) {
    return xml.find('foo\\:bar').text();
}
return xml.find('bar').text();

JPlayer dynamische Multi-Instanzen

Veröffentlicht am von — Keine Kommentare ↓

JPlayer ist eine kostenlose Medienbibliothek für Javascript (JQuery Plugin), welche das Einbinden von Mediendateien (insbesondere Musik und Videos) einfach und Browser-übergreifend ermöglicht.

Allerdings ist JPlayer bei der Verwendung mehrerer Instanzen auf einer Seiten vergleichsweise unflexibel. Die Optionen (Mediendateien, der Verweis auf den visuellen Musik-/ Videoplayer: cssSelectorAncestor, …) müssen während der Instantiierung dem Konstruktor übergeben werden und können nicht während der Laufzeit editiert werden.
Für jede einzelne Instanz von JPlayer bräuchte man also unnötige, redundante (vorausgesetzt die Player sollen alle gleich sein) Javascript-Zeilen.
weiterlesen JPlayer dynamische Multi-Instanzen→

jQuery .load() ohne Container

Veröffentlicht am von — Keine Kommentare ↓

Mit jQuery-Funktion .load() ist es möglich, Inhalte eines Dokuments in ein vorhandenes Element zu laden. Zudem ist es möglich nur ein spezielles Element einer Webseite zu laden:

$('#result').load('dir/file.html #content');

Allerdings wird hierbei der Inhalt des Elements #content von einem gleichnamigen Container eingeschlossen. Das Laden des Inhalts ohne Container ist möglich, indem man explizit alle Kind-Elemente lädt:

$('#result').load('dir/file.html #content > *');

jQuery Mobile: Flackernde/ blickende Übergänge

Veröffentlicht am von — Keine Kommentare ↓

In jQuery Mobile (1.2) kann es bei der Verwendung von

<meta name="viewport" content="width=[...]user-scalable=no[...]">

zu einem Folgefehler kommen, der sich durch flackernde bzw. blickende Buttons bei den Übergängen erkenntlich macht. Das Problem konnte ich unter Android 2.3.* feststellen, bei dem Versuch eine gefixte Navigation (position: fixed;) im Fußbereich zu platzieren.
Als Workaround für die flackernden/ blickenden Übergänge scheint es leider keine besser Lösung zu geben, als die Animationen komplett zu deaktivieren:

$('#page_id').live('pagecreate', function () {
    $.mobile.defaultDialogTransition = "none";
    $.mobile.defaultPageTransition = "none";
});

JQuery Mobile: Cannot call methods on button prior to initialization

Veröffentlicht am von — Keine Kommentare ↓

Bei der Erstellung von Buttons via Javascript in JQuery Mobile stößt man u.U. auf folgende Fehlermeldung:

cannot call methods on button prior to initialization

In der Doku von JQuery Mobile gibt es keinerlei Hinweise zur Lösung des Problems. Allerdings muss das erstellte Element nur als Button „registriert“ werden. Das Problem verschwindet unter Verwendung folgendes Snippets:

$('#container').append('html_code des Buttons'); //Erstellung des Buttons
$('.neuer_button').button(); //Registrierung des Buttons
$('.neuer_button').button('refresh'); //Aktualisieren/ Rendern des Buttons

jQuery: Error-Handling von cross-domain Ajax-Requests

Veröffentlicht am von — Keine Kommentare ↓

Bei Einsatz von Ajax zum dynamischen Nachladen von Inhalten (bspw. in einer HTML5-App), gibt es Besonderheiten zu beachten, wenn man diese domainübergreifend (cross-domain) durchführt: Setzt man keinen „timeout„-Parameter, ist ein Abfangen von Fehlern der Anfrage nicht möglich (im Erfolgsfall werden aber trotzdem die entsprechenden Events abgefeuert).

Um nun die Fehler abzufangen, hilft der folgende Javascript-Code weiter:

var req = $.ajax({url:'http://example.com&callback=?',
	dataType:'json',
	timeout:10000
});
req.done(function () {
	//Aktionen bei erfolgreicher Anfrage
});
req.fail(function () {
	//Aktionen bei fehlgeschlagener Abfrage
});

jQuery Klick-Events bei dynamischen Inhalten

Veröffentlicht am von — Keine Kommentare ↓

Lädt man per Ajax Inhalte nach und möchte Klick-Ereignisse auf die nachgeladenen Inhalte registrieren, stößt man auf das Problem, dass die Klicks bei der Verwendung folgenden Codes eben nicht registriert werden:

$('.neuer_inhalt').click(function(){alert('Klick');});

Um diese Problematik zu umgehen, bietet jQuery die darauf ausgerichtete Funktion live:

$('.neuer_inhalt').live('click', function(){alert('Klick');});

Dadurch werden auch Klicks auf Elemente registriert, die während des Ladens des Dokuments noch nicht existieren.