JQuery Mobile: Cannot call methods on button prior to initialization

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

Android-Debugging: Unable to open sync connection!

Beim Debuggen seiner Android-Apps per USB an einem Smartphone, kann es zu folgender Fehlermeldung kommen:

 java.io.IOException: Unable to open sync connection!

Dieses Problem kann behoben werden, indem man das USB-Debugging auf dem Smartphone deaktiviert und anschließend wieder aktiviert.

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

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
});

Links in externem Browser (Phonegap/ Cordova 2)

Externe Verlinkungen werden unter Phonegap (Cordova) standardmäßig mit dem WebView der App geöffnet. Möchte man allerdings, dass eine Verlinkung mit einem externen Browser geöffnet wird, genügt es nicht nur (wie in einigen Foren behauptet), das target-Attribut auf „_blank“ zu setzen. Man muss zudem in der Cordova-Konfiguration die Access-Origin editieren. Diese erlaubt standardmäßig, dass alle Webseiten im WebView geöffnet werden.
Unter Android befindet sich unter res/xml/ eine config.xml-Datei. Öffnet man diese stößt man auf folgende Zeile

<access origin=".*"/>

Kommentiert man diese Zeile aus und setzt das target-Attribut der betreffenden Links auf „_blank„, wird die Verlinkung in einem externen Browser geöffnet oder ggf. ein Auswahl-Dialog der verfügbaren Browser dargestellt. Die Cordova-Dokumentation beschreibt auch die Funktionsweise der Access-Origin und deren Konfiguration für andere Betriebssysteme.

jQuery Klick-Events bei dynamischen Inhalten

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.

Android border-radius Antialiasing

Beim Experimentieren mit HTML5-Apps unter Android bin ich auf einen störenden Grafik-Bug gestoßen: Verwendet man (wie mittlerweile in vielen modernen Webseiten üblich) die CSS3-Eigenschaft border-radius erkennt man mit dem Standard-Browser auffällige Pixelfehler an den Rundungen. Nach meinen aktuellen Erkenntnissen gibt es bis dato leider kein Work-Around für diesen Fehler. Allerdings gibt es einen Lichtblick: Unter Android 4 wurde der Fehler scheinbar behoben und für ältere Android-Versionen gibt es die Alternative auf bessere Browser zurückzugreifen.

Formular nach Dropdown-Auswahl absenden

Um dem Benutzer umständliche Klicks auf den Submit-Button zu sparen, erweist es sich als praktisch, ein Formular direkt nach der Auswahl eines Wertes abzusenden (wie z.B. nach der Auswahl eines Wertes aus einer Dropdown). Mithilfe von Javascript ist das ziemlich simpel möglich:

<select name="dropdown" onchange="this.form.submit()">
        <option value="value01">value01</option>
        <option value="value02">value02</option>
        <option value="value03">value03</option>
</select>