Tag: jQuery

Select Box Eintrag per Jquery auswählen

Wenn man im Netz nach Anleitung sucht, wie man einer select Box per Jquery sagt, welcher Eintrag ausgewählt sein soll, dann findet man Ratschläge, die ungefähr so aussehen:

$('#dropdownName option[value=wert1]').attr('selected', true);

Prinzipiell ist dieser Aufruf korrekt und läuft auch im Firefox und im Chrome, jedoch nicht im IE und im Safari. Dumm: im Safari wird die select Option zwar mit einem selected markiert, das Feld zeigt aber nicht die Auswahl an.

Die Lösung für das Problem ist relativ simpel, denn ab Jquery 1.6 hat sich lediglich die Syntax etwas geändert (prop statt attr):

$$('#dropdownName option[value=wert1]').prop('selected', true);

Damit sollte nun auch im IE und im Safari das Feld korrekt ausgewählt werden.

Timeout Funktion für jQuery Ajax / JSONP Requests

Gestern stand ich vor dem Problem, dass ich bei einem jQuery Ajax Request mit JSONP einen Timeout einbauen wollte. Alles kein Problem – man muss einfach nur den Parameter “timeout” gefolgt von einem Millisekunden Wert beim Request-Zusammenbau angeben. Jedoch wollte ich auch eine Funktion einbauen, die dem User mitteilt, dass seine Anfrage vom Server nicht beantwortet werden konnte. Prinzipiell ist dies auch mit dem jQuery Ajax Call möglich, jedoch nicht, wenn man JSONP verwendet. Es gibt aber den Umweg der allgemeinen Ajax Konfiguration, mit der man trotzdem einen Timeout und auch eine Fehlerbehandlung implementieren kann.

Nachdem ich mir aus der jQuery Doku und vielen Forenbeiträgen die einzelnen Details zusammengetragen habe, möchte ich diese hier einfach mal in gebündelter Form loswerden:

$.ajaxSetup({
    timeout: 10000,
    "error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }
    }
});

Dieses Stückchen Code ist eigentlich alles, was man dazu benötigt. Führt es einfach aus, bevor der erste Ajax Call abgesetzt wird. Doch gehen wir das einfach mal einzeln durch.

$.ajaxSetup

dient der allgemeinen Konfiguration von Ajax Calls. Man kann innerhalb von $.ajaxSetup jeden Parameter verwenden, der auch bei $.ajax verwendet werden kann. Setzt man Parameter mit $.ajaxSetup, so können diese immer innerhalb des eigentlichen $.ajax Calls überschrieben werden.

Mit

timeout: 10000

setzen wir einen Timeout von 10 Sekunden. Diesen Wert kann man bei jedem einzelnen Call auch nochmal extra überschreiben.

Und am Schluss implementieren wir mit

"error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }

unsere Fehlerbehandlung. Die erstellte Methode fängt dabei alle Fehler, die bei einem Ajax Call entstehen, ab. Daher habe ich an dieser Stelle auch den if-Block eingebaut, der dediziert nur meinen Timeout Fehler abfängt. Weiter Fehlernamen sind: “error”, “abort”, und “parsererror”. Im XLMHttpRequest Objekt bekommt man das Request Objekt des Ajax Calls mitgeliefert und kann so herausfinden, um welchen Call es sich eigentlich handelt.

Durch die Verwendung von $.ajaxSetup haben wir zum einen das Timeout Verhalten von Ajax Calls an einer zentralen Stelle konfiguriert, zum andern haben wir über diesen Umweg auch die Funktionalität für JSONP Requests überhaupt erst ermöglicht.

Verzögertes MouseOver/Hover mit jQuery

Da ich durch meinen Jobwechsel nun in der Frontend Entwicklung tätig bin, muss ich mich natürlich auch stärker mit Javascript – speziell mit jQuery – beschäftigen. Das System ist ziemlich genial gebaut und so kann man sehr schnell einsteigen.

Aber wie das so ist – man stößt auch mal auf Probleme. Und so hing ich an der Aufgabe, ein Hover-Event verzögert auszulösen. Zunächst ging ich davon aus, das jQuery diese Möglichkeit von Haus aus bietet – was aber nicht der Fall ist. Man kann zwar das Plugin HoverIntent verwenden, ich wollte aber eher eine Lösung mit Bordmitteln. Und die gibt es:

$("#cart-summary").mouseenter(function () {
    $("#cart-summary").addClass("hasFocus");
    setTimeout(function(){
        if ($("#cart-summary").hasClass("hasFocus")) {}
            $('.flycart').slideDown('fast');
        }
      }, 500 );
      });
$("#cart-summary").mouseleave(function () {
    $("#cart-summary").removeClass("hasFocus");
});

Das Prinzip ist eigentlich ziemlich genial: Per “Mousenter” wird erkannt, ob sich die Maus über dem Element (in diesem Beispiel “#cart-summary”)befindet. Sofort wird dem Element die Klasse “hasFocus” zugewiesen und der eigentliche Funktionsaufruf (z.B. “slideDown”) wird mittels der TimeOut Funktion verzögert (hier um 0,5 Sekunden) aufgerufen. Der Trick ist nun, dass innerhalb der Timeoutfunktion noch einmal geprüft wird, ob das Element noch die Klasse “hasFocus” hat. Nur wenn dies der Fall ist, wird die “slideDown” Funktion ausgeführt.

Der findige Entwickler wird nun bemerken, dass trotz dieser Raffinessen, das gleiche Ergebnis, wie bei einem einfachen Hover, erziehlt wird – denn auch mit Timeout wird die Funktion in jedem Fall aufgerufen. Und da kommt das zweite Event ins Spiel: bei einem “MouseLeave” wird dem aktuellen Element die Klasse “hasFocus” entfernt. Dadurch schlägt die Prüfung in der TimeOut Funktion fehl und die hinterlegte “slideDown” Funktion wird nicht ausgeführt.

Erst mittels der “MouseLeave” Funktion wird also das verzögerte MouseOver Event ermöglicht.

via stackoverflow.com