jQuery load function – Ajax the simple way (Part 1)

Mit der load Funktion lassen sich einfach HTML-Elemente einer Datei in die Aktuelle einfügen. Diese Funktion ist in erster Linie für den “import” von HTML-Code gedacht und entspricht damit nicht dem typischen Ajax-Request bei dem bspw. ein PHP Skript angesprochen wird, das Daten aus der Datenbank liest und/oder andere serverseitige Prozesse anstösst.

Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

jQuery Formulare validieren – Ein Überblick

Wie im vorigen Post angekündigt starten wir heute mit unserer Post-Reihe “Formulare mit jQuery – Die umfassende Serie“.

Heute wollen wir mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts” beginnen.
Da es zahlreiche dieser Scripts gibt, und diese sich Teilweise nur minimal voneinander unterscheiden da sie meist auf dem bassistance-Plugin von Jörn Zaefferer basieren, werden wir versuchen euch hier nur die vorzustellen welche besonders im Bezug auf Funktionalität, Größe oder Einfachheit der Implementierung sind.

Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.
Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur 24KB in der minified-Version nicht sonderlich groß. Es ist ab jQuery 1.2.6+ verfügbar und kompatibel mit Version 1.3.2.

Es bietet alle nur erdenklichen Arten der Formular Überprüfung.

• Validierung on the fly (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.
• Es besteht z.B. auch die Möglichkeit diese in Abhängigkeit voneinander zu prüfen. Bei einer Gruppe von checkboxen kann z.b. geprüft werden wieviele ausgewählt sein müssen usw.
• Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.
• Eingaben können auf Länge, Typ (E-Mail, Number, String…), Anzahl der gewählten Elemente usw. validiert werden.
• Die Ausgabe der Error-Messages ist sehr flexibel gehalten. So können diese direkt am entsprechenden Formular-Element oder gesammelt, z.B. in einem div, ausgegeben werden. Ändert der User eine fehlerhafte Eingabe reagiert die Validierung und ändert die Error-Messages on the fly.
• Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per AJAX verarbeitet werden.

Das einbinden des Scripts ist auch denkbar einfach.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$().ready(function() {
	$("#FormularID").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
	});
});

Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.

Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen Website.

ganzen Artikel lesen

Formulare mit jQuery – die umfassende Serie

Wie wichtig das Thema Fomulare und jQuery ist, fällt uns beim regelmäßigen überfliegen unserer Blog Statistiken immer wieder auf. Viele der Suchanfragen über Google beinhalten Keywords die mit jQuery und Formularen zu tun haben.
Auch die Seiten welche mitunter die meisten Zugriffe haben gehen in diese Richtung.
Wir wollen dem ganzen Rechnung tragen und starten heute eine langfristige und ausführliche Serie zum gesamten Thema “Formulare und jQuery”.
Die Serie wird aus mehreren Teilen bestehen und sich wie folgt aufgliedern:

• Übersicht über aktuelle Form-Validaton Scripts.
• Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.
• Tutorial “Eigenes Validation-Script mit jQuery erstellen”.
• Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.
• Tutorial “Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload”.
• Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.
• Übersicht zum Thema “customized Forms”. Schönere Formulare mit jQuery.
• Übersicht zum Thema “weiterführende Formulartechniken”.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.

Zum Abschluss der Serie werden wir euch noch unser neues Formular-Plugin vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.

Heute wollen wir gleich mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts“ beginnen.

Ajax Datei-Upload mit jQuery

Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft Ajax. Ein nettes Plugin dafür gibt es auf http://valums.com/ajax-upload/, welches zudem auch Multiple Uploads unterstützt.
Das Plugin glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der Gestaltung von Uploadformularfeldern, also “input type=”file”..” in den Griff bekommen. Auf diese Felder greift das CSS oft nicht wie es sollte usw.

Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor der Submit abgesetzt, bzw. vor dem Abschicken des Formulars auf dem Server liegen, während die restlichen POST Daten eben erst auf Click eines Absenden Buttons an ein Skript weitergereicht werden. Kurz gesagt, wenn Upload mit Ajax und das Formular als Method Attribut GET/POST hat, muss man aufpassen. Das heißt es sollte überprüft werden ob die hochgeladenen Bilder auch tatsächlich genutzt werden und der User nicht nur einfach wild Dateien hochgeladen hat ohne Das Formular auszufüllen.

Screeshot der Demo:

Kurz zu den Bestandteilen des Codes:

- Der HTML Teil

1
2
3

 
<!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird -->
<div id="upload_button">Upload</div>

- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)

1
2
3
4
5
6
7

 
<script src="ajaxupload.3.1.js" type="text/javascript">
<script type="text/javascript">
    $(document).ready( function() {
         new AjaxUpload('upload_button', {action: 'upload.php'});
    });
</script>

Der Ajaxupload kann auch durch Callback-Funktionen und andere Parameter eingestellt werden. Der Code auf der englischen Website ist selbsterklärend. Fragen könnt ihr auch hier stellen.

- Nach abesenden der Daten an “upload.php” geht es an die serverseite Verarbeitung

1
2
3
4
5
6
7
8
9
10
11

 
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}

Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.

Die Demo findet ihr hier

jQuery – Was sollte man bzgl. Performacne beachten

Ich bin soeben über einen schönen Artikel zum Thema Performance und jQuery gestolpert.

In dem Artikel geht es darum was man beachten sollte um optimale Performance mit jQuery zu erzielen.
Es werden Themen wie warum man ID als selektor nutzen sollte, oder warum man besser Tags als Klassen nehmen sollte usw. angeschnitten.
jQuery Performance Rules

Formulare mit AJAX und jQuery – Ein kleines Tutorial

AJAX ist eine vom Prinzip her sehr einfache Technologie. Request mit JS abschicken, Anfrage mit serverseitigem Skript verarbeiten und Ergebnis wieder im Browser ausgeben bzw. anzeigen. Allerdings steckt der Teufel wie immer im Detail. Dieser Post ist eine kleine Anleitung wie man AJAX mit einem Formular einsetzen kann. Weit einfacher ist dies mit der Verwendung eines JS-Frameworks, hier jQuery.

So zunächste einmal der Standardaufbau in HTML für ein Formular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done …

Demo

uploadify – a file upload plugin for jQuery

Wer kennt das nicht!? Die Suche nach einem geeigneten Upload-Script oder Plugin gestaltet sich manchmal doch schwerer als vermutet.
Trotz der Vielzahl an Scripts und Plugins die es gibt, geht es zumindest mir so das immer der ein oder andere Wunsch offen bleibt.
Z.B. Kein ladebalken, oder keine Unterstüztung von mehreren Dateien usw.

Deshalb möchte ich euch kurz uploadify vorstellen. Ein jQuery-Plugin welches zum einen leicht zu integrieren ist und zum anderen alles besitzt was man sich so wünscht.
Upload von einem odere mehreren Files, Ladebalken, und eine unglaubliche Anzahl von Einstellmöglichkeiten.

Der einzige Wehrmutstropfen, wenn überhaupt, ist die Tatsache das der Loader Flash benötigt.

Ein kleines Beispiel für die Implementierung:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
     $('#fileInput').fileUpload ({
          'uploader'  : 'uploader.swf',
          'script'    : 'upload.php',
          'cancelImg' : 'cancel.png',
          'auto'      : true,
          'folder'    : '/uploads'
     });
});

Eine Demo des ganzen findet man hier.

QFocuser – AJAX widgets mit der Tastatur ansteuern

Das Navigieren durch Applikationen mittles der Tastatur ist ein wichtiger Bestandteil in allen Bereichen der useability und accessibility.
Daniel Steigerwald hat sich der Problematik angenommen, welche entsteht sobald mehr als ein AJAX widget auf einer Seite vorhanden sind und eine kleine eigenständige Bibliothek namens QFocuser geschrieben.

Momentan liegt QFocuser in der Version 0.95 vor und läuft auf IE6/7, FF2/3, Safari, Webkit, Opera und Chorme.

Die wichtigsten Features von QFocuser im Überlick:

• erlaubt es dem Widget key events abzufangen wenn es den focus bekommt
• Der Fokus kann für jedes Element aktiviert werden
• löst focus und blur events aus (so das z.b. eine Tabellenzeile nicht länger gehighlighted bleibt wenn man ausserhalb der Tabelle klickt)
• Ermöglicht es das Widget über Tab anzusteuern

Eine Demo des ganzen findet man hier.

Beispielcode:

1
2
3
4
5
6
7
8

  var focuser = new QFocuser(widgetContainer, {
                onFocus: function(focusedEl) { .. add highlighted class or whatever }
                onBlur: function(focusedEl) { .. remove highlighted class or whatever }
        });
        // attach your own keys listeners
        $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
        // when your widget decided to set the focus (and then receive key events)
        focuser.focus(tableRowForExample);

zu finden ist das gesamte Projekt bei Google Code.