JQuery Kochbuch (German Edition)

name="lng" value="-93.278046" />


    Darauf basierend können wir die Karte initialisieren und sie mit den Spinnern verbinden:
function latlong() {
    return new google.maps.LatLng($("#lat").val(),$("#lng").val());
}
function position() {
    map.set_center(latlong());
}
$("#lat, #lng").spinner({
    precision: 6,
    change: position
});

var map = new google.maps.Map($("#map")[0], {
    zoom: 8,
    center: latlong(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
    Die Funktion
position
setzt die Mitte der Karte auf die Längen- und Breitenwerte aus den Spinner-Feldern. Initialisiert werden sie mit dem Wert 6 für die Option
decimal
und die Funktion
position
wird für die Option
change
übergeben. So wird die Karte immer dann aktualisiert, wenn sich einer der Spinner ändert. Danach wird die Karte noch mit Hilfe der Google Maps API initialisiert.
    Der Nachteil der Spinner ist in diesem Fall, dass Inkrement und Dekrement nur die Ziffern vor dem Dezimalpunkt beeinflussen, daher ist das Scrollen doch mit recht großen Sprüngen behaftet. Die Option
increment
rundet jeden Wert kleiner Eins auf Eins, daher ist sie hier nicht so hilfreich.

Dateien im Hintergrund hochladen
    Problem
    Das Hochladen von Dateien ist für viele Web-Anwendungen ein wichtiger Bestandteil, es wird aber von den Browsern mehr schlecht als recht unterstützt. Das größte Problem ist die fehlende Rückmeldung zum Status, während gleichzeitig jede Aktion des Benutzers den Vorgang abbrechen lassen kann. Ein einfacher Fortschrittsbalken kann die Rückmeldung deutlich verbessern, aber dafür muss auf Server-Seite einiges getan werden, während das Problem mit den Abbrüchen durch Anwender-Aktionen trotzdem besteht.
    Lösung
    Um die Situation zu verbessern, sollten Dateien im Hintergrund hochgeladen werden. Dadurch kann die Anwendung weiter genutzt werden.
    Durch das jQuery-Plugin form wird der Wechsel vom klassischen Browser-basierten Hochladen zum Hochladen per Ajax im Hintergrund zu einem Kinderspiel. Wir nutzen hier diese Form:

    
    

    Hier brauchen Sie nur einen Aufruf von
ajaxForm
:
$("#uploadform").ajaxForm();
    Das Hochladen im Hintergrund ohne irgendeine Rückmeldung über den Erfolg ist natürlich nicht ausreichend, daher nutzen wir die Option
success
, um nach dem erfolgreichen Hochladen eine Meldung auszugeben:
$("#uploadform").ajaxForm({
    success: function() {
     alert("Hochladen abgeschlossen!");
    }
});
    Diskussion
    Die Methode
ajaxForm
bindetsich selbst an das Submit-Event der Form, wodurch auch der Button, mit dem die Form abgeschickt werden sollte, in die Ajax-Anfrage mit eingebunden werden kann. Wenn man
ajaxSubmit
nutzt, ist das nicht möglich. Die Methode
ajaxSubmit
ist hilfreich, wenn das Abschicken der Form an anderer Stelle vorgenommen wird, zum Beispiel durch das Validation-Plugin. Um Validierung und Ajax zusammenzuführen, sollte
ajaxSubmit
in der Option
submitHandler
genutzt werden:
$("#commentform"). validate ({
    submitHandler: function(form) {
     $(form).ajaxSubmit({
     success: function() {
     $(form).clearForm();
     alert("Vielen Dank für Ihren Kommentar!");
     }
     });
    }
});
    Die Methode
clearForm
wirdebenfalls vom Form-Plugin bereitgestellt. Sie entfernt alle Werte aus der Form. Das erleichtert es dem Anwender, eine weitere Datei hochzuladen.

Die Länge von Texteingabefeldern begrenzen
    Problem
    Es ist immer wieder notwendig, die Menge der Zeichen in einer Textarea zu begrenzen,wie zum Beispiel bei den 140 Zeichen für Twitteroder den 500 Zeichen für einen Kommentar bei YouTube. Für den Anwender ist es frustrierend, erst nach dem Abschicken der Form darüber informiert zu werden, dass er zu viel eingegeben hat. Daher ist es sinnvoll, immer anzuzeigen, wie viele Zeichen noch eingegeben werden können.
    Lösung
    Das Maxlength-Plugin löst dies durch Hinzufügen eines Indikators »Noch x Zeichen« vor oder hinter der Textarea. Das Plugin schaut, nachdem es auf ein Texteingabefeld oder eine Textarea angewandt wurde, nach einem Element mit der Klasse
charsLeft
, um dort den Zähler zu aktualisieren:

Noch 10 Zeichen

$('textarea').maxlength();
    Um dies weniger aufdringlich zu gestalten, können wir die notwendigen Elemente mit jQuery erzeugen, womit wir ein einfacheres