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.

[Quicktip] Callback-Funktionen mit Javascript

Neben der Möglichkeit, unter Javascript anonyme Funktionen direkt als Parameter zu übergeben, kommt man vielleicht auch mal an die Stelle, dass man einer Methode den Namen einer anderen Funktion übergeben möchte, die diese dann nach Fertigstellung ihrer Aufgabe ausführen soll. Da man nicht einfach wie z.B. bei php den Funktionsnamen dynamisch per Variable angeben kann, muss man einen kleinen Trick anwenden. Und der geht so:

if(typeof window[funcName] == 'function') window[funcName]();

In der Variable “funcName” steht der Name der Funktion drin, die ihr aufrufen wollt. Der if-Block davor dient nur der Sicherheit – die Funktion wird nur aufgerufen, wenn es sie auch gibt. In der Klammer bei ” window[funcName]()” könnt ihr natürlich wie gewohnt Parameter übergeben.

[Update]
Und hier noch eine weitere Möglichkeit, die mir persönlich besser gefällt und die auch zuverlässiger funktioniert:

function funktionEins(data, callback) {
    //...
    //do something with data...
    //...
    //run our callback
    if(callback != undefined && typeof callback == 'function') callback();
}

Optional kann man natürlich auch Daten/Variablen an die Callbackmethode übergeben:

callback(data);

Wir haben nun also eine Ausgangsfunktion. Rufen wir diese nun auf und übergeben eine existierende Funktion oder eine anonyme Funktion, so kann diese ausgeführt werden:

function funktionZwei() {
    //do something
}
funktionEins("test", funktionZwei);

oder eben

funktionEins("test2", function(data) {
    alert(data);
});

mit einer anonymen Funktion, die in diesem Beispiel eben auch einen Parameter anbietet.

via selfhtml.org

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