Stetix » javascript

jQuery: Select Wert auslesen

Nico — Wed, 06 May 2009 20:55:17 +0000

Weil ich öfters gefragt werde, hier mal ein kurzes Tutorial, wie ich den Wert des aktuell gewählten Wertes eines Selects mit jQuery auslesen kann. Eigentlich funktioniert das wie mit anderen Input-Feldern auch, nämlich mit der Funktion “val”. Angenommen, wir haben folgende Selectbox:

Den Wert der aktuell gewählten Option erhalten wir mit:

$('#hersteller').val();

Möchten wir den Text, also Inhalt der aktuell gewählten Option erhalten, geht dies über den zusätzlichen Selektor “:selected” und die Funktion “text”:

$('#hersteller :selected').text();

Auch das Auslesen von mehreren gewählten Select-Optionen/Werten ist mit dem Selektor “:selected” und einer each-Schleife möglich:

$('#hersteller :selected').each(function(i, option){ // hier können wir den Inhalt von "option" verwerten });

Oder das Setzen einer Select-Option:

$('#hersteller').val("1");

Eigentlich alles ganz easy oder? jQuery macht Spass!

301 Weiterleitung einer Website per mod-rewrite

Nico — Wed, 25 Feb 2009 19:12:49 +0000

Wenn sich die Domain oder Url einer Website geändert hat, empfiehlt sich eine Weiterleitung auf die neue Adresse mit dem HTTP-Statuscode 301 (Moved Permanently). Der Code 301 deshalb, damit auch Suchmaschinen wie Google wissen, das sich die Adresse für immer geändert hat und nur die neue Url verwendet werden soll. Google berücksichtigt hier auch den Pagerank und ordnet diesen der neuen URL zu.

Die Technik

Technisch gesehen werden vom Webserver im HTTP 2 Zeilen an den Client (Nutzer mit Browser, Suchmaschine) gesendet. Eine mit dem Statscode und eine mit dem Ziel der Weiterleitung:

HTTP/1.1 301 Moved Permanently Location: http://www.neue-url.de/pfad/zur/datei.htm

Eine HTTP-Sitzung per Telnet auf Port 80 sieht dann zum Beispiel so aus:

# telnet alte-domain.de 80 Trying 12.34.56.78... Connected to alte-domain.de. Escape character is '^]'. GET / HTTP/1.1 Host: alte-domain.de HTTP/1.1 301 Moved Permanently Date: Thu, 25 Feb 2009 20:06:55 GMT Server: Apache/2.2.11 Location: http://neue-domain.de/ Content-Length: 225 Connection: close Content-Type: text/html; charset=iso-8859-1 301 Moved Permanently

`Moved Permanently`



The document has moved here.




Connection closed by foreign host.

mod_rewrite – die Lösung

Um dies mit Hilfe des Webservers Apache zu lösen, hilft uns das Modul Rewrite, kurz mod_rewrite. Hat man Zugriff auf die Konfigurationsdatei des Webservers, kann man die Rewrite-Weiterleitung im VirtualHost, in der Directory- oder Location-Direktive vornehmen. Anonsten erstellt man eine .htaccess-Datei und nimmt die Konfiguration hier vor.
Um mod_rewrite zu aktivieren, benötigen wir folgende zwei Zeilen:

RewriteEngine on RewriteBase /
Die erste Zeile aktiviert das Modul und die zweite setzt den Basis-Pfad, für den die folgende Rewrite-Konfiguration dienen soll. Möchten wir beispielsweise nur für das Verzeichnis /homepage/blog/ eine Weiterleitung erstellen, benötigen wir folgende Einstellung:

RewriteEngine on RewriteBase /homepage/blog/

Als nächstes definieren wir unsere Regel für die Weiterleitung. Diese beinhaltet das Suchmuster und den Ersatz, d.h. die Original-Url und die neue Adresse der URL-Weiterleitung. Das tolle ist, das hier Reguläre Ausdrücke verwendet werden können. Die Syntax ist wie folgt:

RewriteRule

Eine Domain-Weiterleitung mit mod_rewrite würde zum Beispiel so aussehen:

RewriteRule ^(.*)$ http://www.neuedomain.de/$1 [R=301,L]

Eine Weiterleitung eines Verzeichnisses so:

RewriteRule ^homepage/blog(.*)$ http://www.neuedomain.de/homepage/blog$1 [R=301,L]

Das mit dem Modul Rewrite noch mehr Möglichkeiten z.B. dynamischer Weiterleitungen bestehen, verdeutlicht folgendes Beispiel:

RewriteRule ^([a-z\-]+)/([a-z\-]+)/(.*)$ http://www.neuedomain.de/$3?site=$1&sub=$2 [R=301,L]

Jede Regel ist aber vorher gut zu durchdenken, da bei Fehlkonfiguration die Performance des Apache in Mitleidenschaft gezogen oder sogar zum Absturz, z.B. durch Endlosschleifen, gebracht werden kann. Mehr Informationen und viele Möglichkeiten mehr gibt es in der mod_rewrite Apache-Doku.

Andere Möglichkeiten einer Weiterleitung

Ist mod_rewrite nicht installiert, oder keine Berechtigung zur Benutzung gegeben, müssen andere Lösungen her.

Weiterleitung mit PHP

Mit PHP könnte man oben beschriebene Weiterleitungen mit Hilfe der header-Funktion lösen.

Weiterleitung mit Perl / CGI

Auch mit Perl könnte man die Weiterleitung mit Hilfe eines Headers direkt per print lösen:

#!/usr/bin/perl

print "HTTP/1.1 301 Moved Permanently\n";
print "Location: http://www.neue-url.de/pfad/zur/datei.htm\n";

Weiterleitung mit Ruby

In Ruby kann man dies zum Beispiel so realisieren:

#!/usr/bin/env ruby

require 'cgi'
cgi.header({'HTTP/1.1 301 Moved Permanently','Location'=>'http://www.neue-url.de/pfad/zur/datei.htm'})

Clientseitig ohne 301-Status: Javascript

Eine clientseitige Weiterleitung könnte mit Javascript realisiert werden. Nachteil ist hier, das bei deaktiviertem Javascript die Weiterleitung nicht funktioniert.

Clientseitig ohne 301-Status: Weiterleitung per Meta-Tag

Hierfür wird im Head Bereich des HTML-Codes ein Meta-Tag eingefügt, der durch Semikolon getrennt die Zeit angibt, die der Browser bis zur Weiterleitung warten soll und die URL des Ziels der Weiterleitung. Auch diese methode empfehle ich nicht, da dies wie auch Javascript Interpretationssache des Browsers ist, diesen tag zu beachten (Wobei alle Standard-Browser dies tun).

Meine Empfehlung: Immer mod-rewrite nutzen, da serverseitig, gut konfigurierbar und vielseitig einsetzbar. Sollte dies nicht vorhanden oder möglich sein, können die anderen genannten Möglichkeiten einer Weiterleitung (PHP oder andere serverseitige Script- bzw. Programmiersprache, Javascript, Meta-Tag – in der Reihenfolge) weiterhelfen.

Happy Redirecting!

Selectbox mit Prototype per Ajax befüllen

Nico — Tue, 16 Dec 2008 17:22:49 +0000

Ich habe gestern mit einem Kollegen versucht, eine Selectbox mit dem Javascript-Framework Prototype per Ajax zu füllen. Mit jQuery – was wir in letzter Zeit mehr einsetzen – keine grössere Sache. Mit Prototype aber mussten wir etwas grübeln. Da ich in Google nicht wirklich fündig geworden bin, gibt es hier nun ein Beispiel. (Und ich kann gleich das Syntax-Highlighting in WordPress testen :-)

Es soll anhand des Wertes einer Select-Box Daten per Ajax von einem PHP-Script geladen und in eine zweite Select-Box als Optionen hinzugefügt werden.

Zuerst benötigen wir zwei Select-Boxen:


Kategorie


Artikel

Das Javascript (Prototype muss eingebunden sein):

Und hier noch das PHP-Script als Beispiel:


/**
 * Artikel-Array, wuerde im echten Leben aus
 * einer Datenbank kommen.
 */
$artikel_data = array
(
  1 => array
      (
        array("id" => 1, "name" => "Artikel Nummer 1"),
        array("id" => 2, "name" => "Artikel Nummer 2"),
        array("id" => 3, "name" => "Artikel Nummer 3"),
      ),
  2 => array
      (
        array("id" => 4, "name" => "Artikel Nummer 4"),
        array("id" => 5, "name" => "Artikel Nummer 5"),
        array("id" => 6, "name" => "Artikel Nummer 6"),
      ),
  3 => array
      (
        array("id" => 7, "name" => "Artikel Nummer 7"),
        array("id" => 8, "name" => "Artikel Nummer 8"),
        array("id" => 9, "name" => "Artikel Nummer 9"),
      ),
);

/**
 * Als Json ausgeben
 */
if($_GET['kategorie'])
{
  echo json_encode($artikel_data[$_GET['kategorie']]);
}

Hier das gesamte Beispiel. Viel Spass! Wenn jemand eine schnellere Lösung hat, nur her damit.

No related posts.

50 nützliche Plugins für jQuery

Nico — Mon, 15 Dec 2008 11:37:20 +0000

jQuery ist ein Javascript-Framework, welches einem die Arbeit mit Javascript sehr erleichtert und viele nützliche Tools beinhaltet. Mit Hilfe von Plugins kann dieses Framework durch noch mehr Funktionen erweitert werden. Eine schöne und gut gemischte Sammlung mit 50 sehr guten jQuery-Plugins gibt es ab heute bei Dr. Web. Viel Spass beim Ausprobieren.

No related posts.