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 HowTo: Traversing

Travesieren gehört zum grundlegenden Handwerkszeug, wenn man fortgeschrittene Animationen mittels jQuery durchführen möchte. Hier ein kleine Anleitung zum Auffinden bestimmter Elemente.

Was passiert hier? Basis ist diese HTML Struktur:

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

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

Praxistipp: jqTransform Button width einstellen

So nett und schön das jqTransform Plugin auch ist, macht es i.A. doch ein paar kleine Probleme. Neben der unterschiedlichen Interpretation der Breite von Textfeldern in FF und IE, lässt sich auch die Breite der Standardbuttons nicht aus dem eigenen CSS einstellen.

Wer dies tun möchte und die entsprechende Einstellung nicht finden kann, dem sei hier eine kleine Hilfe geboten. Dazu müsst ihr die jqtransform.css öffnen und in Z.36 dem Selektor “button.jqTransformButton span span” die neue Eigenschaft width zuweisen.
Das kann dann beispielsweise wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13

button.jqTransformButton span span {
	background: transparent url(img/btn_left.gif) no-repeat top left;
	color: #333;
	padding: 10px 4px 0px 8px;
	font-weight: normal;
	font-size: 12px;
	line-height: 13px;
	display: block;
	text-decoration: none;
	height: 33px;
	width:auto;
	min-width: 100px;
}

Praxistipp – jqTransform width bug

Wer jqTransform schon einmal benutzt hat wird sicherlich festgestellt haben, dass der Internet Explorer und der Firefox Browser die Textfelder in einer unterschiedlichen Breite darstellen.
Das ist zurückzuführen auf das size-Attribut, dass selbst wenn nicht im input Feld verankert im IE mitberücksichtigt wird.

Ein kleiner Workaround dafür ist, die Berechnung des Size-Attributs im js-Code zu entfernen. Selbstverständlich mit der Folge, dass dieses Attribut nicht mehr zu diesem Zweck eingesetzt werden kann. Was ich persönlich als nicht weiter schlimm erachte, da zur Best Practice des Webprogrammieres gehört, die Festlegung von Oberflächeneigenschaften über das CSS zu definieren.

Nun zum Workaround:

1
2
3
4
5

// Z. 107 in der jquery.transform.js
	if($input.attr('size')){
		inputSize = $input.attr('size')*10;
		$input.css('width',inputSize);
	}

Diesen Codeteil könnt ihr einfach löschen, da es zur falschen Berechnung der Breite für die Textfelder führt. Ich konnte keine ungewollten Seiteneffekte feststellen. Wenn ihr etwas findet, wäre ich dankbar für Kommentare.

Praxistip – jqTransform und display:none

Wenn jemand schon einmal versucht hat ein, mit jqTransform umgewandeltes Formularfeld, in einem auf display:none gesetzten HTML-Element anzuzeigen, dürfte er auf Probleme gestossen sein.
Das lässt sich mit einem kleinen Workaround, ohne in das Original js ändern zu müssen, leicht beheben.

Zuerst die display Eigenschaft wieder sichtbar setzen

1
2
3
4
5
6

<form action="some.php" id="myForm" method="post">
  <div style="display:block" id="status">
     <input type="text" value="content" />
  </div>
</form>
</div>

Wäre die CSS-Eigenschaft display auf none gesetzt, würde das eingebaute jqTransform zur fehlenhaften Anzeige führen. Um dieses Element jetzt trotzdem nicht anzuzeigen kann man einfach folgendes Codestück im “document ready” Event von jQuery einbauen

1
2
3
4
5
6

<script type="text/javascript">
jQuery(document).ready(function($) {
     //some code...
 
     jQuery('#status').hide('fast');
 });

Das Prinzip lässt sich mit entsprechenden jQuery Selektoren natürlich auch auf mehrere Elemente übertragen.

IxEdit – jQuery the easy way

Mit IxEdit ist es möglich JQuery Funktionen ohne JS-Programmierung direkt on-the-Fly im Browser den gewünschten HTML Elementen zuzuweißen. Statt vieler weiterer Worte das Demo Video:

Wenn ihr es ausprobieren wollt, so gehts:

1. Als erstes die notwendigen IxEdit Dateien von IxEdit herunterladen

2. Das das Google Gears Firefox Addon Google Gears Portable installieren und Browser neu starten

3. Im entpackten IxEdit Ordner die index.html aufrufen

Nun könnt ihr den bestehenden HTML Elementen nach belieben jQuery Events zuweißen. Das Tool ist ideal zum Experimentieren mit verschiedenen Effekten und auch allgemein um sich einen besseren Überblick über die Möglichkeiten von JQuery zu verschaffen.

Nachdem alle gewünschten Effekte integriert sind, wird mit der Deploy-Funktion der entsprechende jQuery Code angezeigt, der dann in das Quelldokument kopiert werden kann.

Easy oder!?

Praxistip: Output Element des jQuery Validate Plugin ändern

Das allseits bekannte jQuery Plugin um Formularfelder zu validieren funktioniert im Standardszenarion sogut wie problemlos.

Schwieriger wird es schon wenn mehrere Plugins auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise jqTransform

Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich errorPlacement.
Die Funktion sieht so aus:

1
2
3

 errorPlacement: function(error, element) {
     error.appendTo( element.TRAVERSINGFUNKTION );
   },

Nehmen wir ein Formular:

1
2
3
4
5
6
7

<form action="somescript.php" id="form" method="get">
   <input type="text" name="user">
   <label><label> 
   <input type="text" name="pw">
   <label><label>
</form>
 <div id="error"></div>

Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer anderen Stelle zeigen kann man die Funktion folgendermaßen umschreiben:

1
2
3
4
5

$("#form").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.next() );
   }   
});

Die Fehlermeldungen würde nun ausgehend vom input (element) in das nächste DOM Element, in unserem Fall das label-Tag, geschrieben werden.
Natürlich haben wir mit diesem Beispiel nur wieder das Ausgangsverhalten des Plugins erreicht. Dieses Prinzip lässt leicht auf komplexere Anwendungsfälle übertragen. Wie beispielsweise bei erwähntem jqTransform, bei dem um das input-Feld mehrere Divs gelegt werden. Die Fehlermeldung des Validate Plugins wird dann unterhalb (auf z-Ebene) der Felder angezeigt. Durch travesieren durch den DOM-Baum können die Fehlermeldungen beliebig positioniert werden.

jQuery Form Plugin – Do some AJAX magic easily

Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre Formulare AJAX gestützt umzusetzen.

Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.

Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:

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

<head> 
    <script type="text/javascript" src="path/to/jquery.js"></script> 
    <script type="text/javascript" src="path/to/form.js"></script> 
 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Formular wurde gesendet!"); 
            }); 
        }); 
    </script> 
</head>
<body>
<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Kommentar: <textarea name="kommentar"></textarea> 
    <input type="submit" value="Abschicken" /> 
</form>
</body>

Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.

Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:

• target
• url
• success
• …

Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:

1
2
3
4
5
6
7
8
9
10
11

// Optionobjekt mit gesetzten Attributen
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function() { 
        alert('Erfolgreich abgeschickt!'); 
    } 
}; 
 
// Options einfach der Mehthode ajaxForm als Parameter übergeben
$('#myForm').ajaxForm(options);

Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.

jQuery Tutorial – Closing an Accordion automatically

Entscheidender Punkt für die Umsetzung dabei sind Events. Die jQuery API bietet eine Menge verschiedener Events für die Registierung von Mousebewegungen.
In unserem Beispiel sorgen wir nun dafür, dass sich nach dem Verlassen des Accordions mit dem Cursor das letzte geöffnete Accordion Div wieder schließt.

Also, erstmal zum HTML-Aufbau

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

 
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<div>
	<h3><a href="#">First</a></h3>
		<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	           </div>
	<div>
		<h3><a href="#">Second</a></h3>
		<div>Phasellus mattis tincidunt nibh.</div>
	</div>
	<div>
		<h3><a href="#">Third</a></h3>
		<div>Nam dui erat, auctor a, dignissim quis.</div>
	</div>
</div>

Das ist der Standardaufbau des Accoridons aus jQuery UI. Das CSS entstammt dem jQuery UI CSS Framework.
Damit können Themes einfach, im Prinzip durch eine standardisierte Benamung von Elementen, ausgetauscht werden.

Nun zum Javascript Code. Er beinhaltet den Aufruf des Accordions und die Registrierung der Mouseevents.
Wir wollen das Accordion erst nach einer kleinen Verzögerung schließen, deshalb benutzen wie die Funktion setTimout. Falls der Benutzer innhalb dieser Zeit wieder mit dem Cursor über das Accordion fährt, muss dieser Timeout abgebrochen werden. Deshalb speichern wir
das Timeout-Objekt in einer globalen javascript Variabeln (tObj). Mittels der Funktion clearTimeout wird dieser Timout nun vorzeitig ohne Aufruf der Callback-Funktion beendet.

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

<script type="text/javascript">
	var tObj;
 
	$(function(){
	           // simple accordion with special markup
		$('#accordion').accordion({
			header: 'h3',
			active: '.selected',
			collapsible: true,
			autoHeight: false
		});
 
		$("#accordion").mouseleave(function(){
		   	tObj=setTimeout("menu.accordion('activate', active);",3000);
 	           });
 
		$("#accordion").mouseenter(function(){
	     		clearTimeout(tObj);
   		});
 
	});
</script>

Da das Accordion in das Div mit der id “accordion” gehüllt ist, genügt es uns vollkommen die Events ebenfalls auf dieses Div zu legen.
Es bietet sich an die zwei Mousevents mittels Punktoperator zu verknüpfen. Die Funktionalität bleibt die gleiche, allerdings wird eine DOM Operation weniger ausgeführt. Was sich vor allem in Schleifen deutlich bemerkbar macht.
Verkettet sähe die Anweisung so aus:

1
2
3
4
5

	$("#accordion").mouseleave(function(){
		tObj=setTimeout("menu.accordion('activate', 'active');",3000);
               }).mouseenter(function(){
	    	clearTimeout(tObj);
	 });

Ein Beispiel dazu findet unter in unserem Demobereich.

And kind regards to Fabian Hallstein for his idea…

ifixpng2 & pngFix – Transparenz für den IE6

Immer wieder stößt man bei der Entwicklung von Webseiten auf das Problem transparenter Hintergründe von png’s im IE6. Es gibt diverse Hacks und Workarounds dafür. Ein paar besondere sollen hier nun kurz vorgestellt werden.

- ifixpng2
Das alte ifixpng plugin hat ein update verpasst bekommen. Einige Fehler oder Probleme wurden behoben, vor allem erwähnenswert dabei, das Elemente mit Background-Image nicht mehr visible bzw. sichtbar sein müssen um den gewünschen Effekt zu erhalten. Den Download zum ifixpng2 findet ihr hier.

1
2
3
4
5

//DOM-Ready Event
 $(document).ready(function(){ 
//Der Fix wird auf alle Class-Attribute mit "legende" angewendet
     $('.transparent').ifixpng();
  });

- pngfix
Ein anderes nettes Plugin um das Transparenzproblem zu lösen findet ihr auf der Seite von Andreas Eberhard. Das schöne bei diesem Plugin ist, dass nicht nur pngs gefixt werden, die im CSS als background angegeben sind, sondern auch direkt img-Tags angesprochen werden können.
Der Aufruf dazu ist derselbe wie beim ifixpng2:

1
2
3
4

//plugin wird auf alle Bilder angewendet
 $(document).ready(function(){ 
        $(document).pngFix(); 
    });

Dieser einfache Aufruf geht allerdings bei vielen Bildern auf der Seite zu Lasten der Performance. Ich empfehle eine präziseren Aufruf für genau diejenigen Bilder, die den
pngfix erhalten sollen.

1
2

//Fix bezieht sich auf jedes Div mit der Class "Legende"
jQuery('div.legende').pngFix();