everflux

In älteren Versionen von jQuery konnte man einen Selektor für den hash Wert von Links schreiben. (Der Hash Wert ist der Teil hinter „#“ in einem Link element, man kann damit verschiedene Bereiche in einer Seite anspringen.)

Das sah mit jQuery 1.2.6 z.B. so aus:

$("a[hash='#sprungMarke']");

Bei neueren jQuery Versionen ist das nicht mehr so explizit möglich. Dafuer gibt es jedoch Selektoren mit denen man auf Inhalte und partielle Inhalte von Attributen matchen kann. Hiermit ist es dann wieder möglich auf den Hash Wert zu matchen, denn es handelt sich dabei gerade um das Ende des „href“ Attributes eines Links.

Mittels „$“ kann man das Suffix-Matching für den Wert eines Attributes machen.

Damit sieht das dann so aus:

$("a[href$='#sprungMarke']");


Die neuen, flexibleren, Selektoren von jQuery können also Arbeit sparen, wenn man sich ihrer Mächtigkeit bewusst ist.

Es kam die Frage auf, wie man bei einer Web Anwendung, bei der die Ausgabe vorgegeben ist, die Präsentation anpassen kann. Ohne eben die Web Anwendung ändern zu müssen.
Wenn man auf die Ausgabe gewissen Einfluss hat (z.B. über Templates), so kann man mit JavaScript und jQuery sehr einfach Anpassungen vornehmen – sogar aufgrund des HTML Inhalts. (In diesem Fall ging es um die optische Anpassung von Tabellen Zeilen, wenn es sich um premium Kunden handelt.) Weiterlesen »

Der IE 6 ist sicherlich schon betagt, was aber noch lange nicht bedeutet, dass er nicht noch reichlich Verwendung finden würde. Besonders wenn für eine Kundensoftware Internet Explorer 6 zwingend unterstützt werden muss, kann man sich auf viele Überraschungen gefaßt machen.

Eine davon ist der Umgang mit CSS (background) Bildern und dem Cache des Internet Explorer. Normalerweise sollte ein Webbrowser Elemente (wie z.B. Grafiken) nur einmal laden, und dann im internen Cache bereithalten, um ggf. wiederverwendet zu werden. Da häufig Elemente auf Webseiten – besonders Hintergrundgrafiken und Style Elemente – wiederkehrend sind, kann man damit Bandbreite und natürlich auch Zeit sparen. Weiterlesen »

Gerade wenn es um sogenannten user generated content geht, ist es immer schön, wenn man eine Vorschaufunktion anbieten kann. Ein Knopf „Vorschau“ ist ziemlich 1990 – es lebe das Web 2.0 mit Ajax, jQuery und vielen Hacks.

Ich hatte bereits darüber gebloggt wie man mittels jQuery und etwas Tricksen einen „Ajax Fileupload“ realisert. Noch schöner ist es natürlich, wenn der User sofort Feedback bekommt, wie sein ausgewähltes Bild wohl aussehen würde. Dazu lädt man das Bild schon direkt nachdem der User eine Datei ausgewählt hat, und zeigt diese an. An Browser-Caches muss man vielleicht noch denken, aber auch hier kann JavaScript bzw. jQuery helfen.

Das Vorgehen:

1. Man hängt einen Listener an die Change Methode des Input Felds
2. Wie in meinem letzten Beitrag beschrieben wird der Upload über ein Iframe realisiert
3. Nun biegt man noch die Bild URL um und zeigt somit das Resultat an

Hier der Quellcode: (das Formular heißt „logoUploadForm“, das input Feld für das Image File „logo“.
Ajax Fileupload handling – und Bild URL umbiegen nach dem Upload.

//handle file upload with hidden iframe
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");
uploadFrame.css("display", "none");
uploadFrame.load(function(data){
//submit is complete here
setTimeout(function(){
//update image
var imageDiv = jQuery("#print_logoImage");
var logoUrl = imageDiv.attr("src").split("?")[0];
imageDiv.attr("src", logoUrl+"?"+ (new Date()).getTime());
//remove hidden upload frame
uploadFrame.remove();},1000);
});
jQuery("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});

Hier noch der Code zum „sofort upload“:

jQuery("input[name=logo]").change(function (){
jQuery("#logoUploadForm").submit();
});

Das wars – ausprobieren!

Ajax ist eine tolle Erfindung – bis auf ein paar „Kleinigkeiten“. Z.B. ist nicht vorgesehen einen Dateiupload mittels Ajax zu realisieren. Da muss schon ein echtes Formular her.

Doch wenn dennoch eine Datei im Hintergrund hochgeladen werden soll – also ein „echter“ Ajax File upload realisiert werden soll – greift man in die kreative Trickkiste. Die üblichen Verdächtigen für solche Aufgaben sind DWR, jQuery, Dojo. DWR bringt in der Inkarnation 3.0 dann auch Support für Ajax Fileupload, inclusive einem Mapper. Also zurück zu den Basics – was tun, wenn ein XmlHttpRequest nicht da ist? Richtig! Unsichtbares iframe nehmen. Weiterlesen »

Das Google Web Toolkit wird erwachsen – das behauptet Google zwar nicht selber, doch das Umfeld spricht eine deutliche Sprache. GWT 1.5 wird endlich – lang ersehnt – Java 5 und damit auch die Generics von Java 5 unterstützen. Auch wenn noch keine fertige 1.5 Version von GWT vorliegt, so arbeiten bei Google eifrig die Entwickler an dem OpenSource Projekt.

Während von GWT 1.5 inzwischen Milestone 2 verfügbar ist, wächst auch das Ökosystem rund um das Google Web Toolkit:

GQuery ist eine typsichere Umsetzung von jQuery für GWT – wer jQuery kennengelernt hat, wird es sicherlich auf Anhieb lieben.

GWT-SL, die Google Webtoolkit Server Library zielt auf Spring Framework Integration ab: Spring Beans können als RPC Dienste exportiert werden, und macht so die Integration in bestehende Entwicklungs-Stacks oder auch Applikationen einfacher.

Hibernate4GWT schließlich rundet das ganze ab: Hibernate persistierte Objekte (und lazy collections) können ohne Verrenkungen mit GWT verwendet werden. Mit GWT 1.5 und Java Generics wird das sicherlich noch ein großes Stück angenehmer.