jQuery

Warum jQuery nicht lokal gehostet, sondern via Google CDN eingebunden werden sollte

Posted on by marcus

Die jQuery-Bibliothek braucht man ja nun wirklich in fast jedem Projekt. jQuery ist auch so verbreitet, dass es von sehr vielen Webseiten eingesetzt wird.  Ok, und genau deswegen bindet man jQuery über das Google Ajax Libraries CDN ein. Das hat natürlich hauptsächlich den Vorteil, dass der User über die schnellen Google-Server downloadet und auch die Verteilung von statischen Inhalten via CDN lässt ja die eigene Site flotter laden. Darüberhinaus ist die Wahrscheinlichkeit sogar recht hoch, dass jQuery bereits beim User lokal gecacht ist, da dieser vermutlich schon andere Seiten besucht hat, die ebenfalls das Google CDN verwendet haben. Für den unwahrscheinlichen Fall, dass das JS mal wirklich nicht erreichbar sein sollte, könnt Ihr folgendes machen:

[sourcecode language=“css“]


[/sourcecode]

So hat man dann noch für den Fall der Fälle zusätzlich einen lokalen Fallback auf’s jQuery-Javascript.

Datepicker für Formulare mit jQuery UI

Posted on by marcus

Immer wieder gestaltet man als Webworker Formulare für Websites, die Felder für Datumswahl beinhalten. Ich zeige in diesem Blogpost auf, wie man diese Aufgabe schnell und elegant mit Hilfe von jQuery UI löst.

Als erstes braucht man natürlich die jQuery-Javascript-Bibliothek in der Applikation (http://jquery.com/), für den produktiven Einsatz wird selbstverständlich die minimierte Version eingesetzt. Zusätzlich benötigt man den UI-Core, der bei Google Code unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.core.js erhältlich ist und zum guten Schluss das Datepicker-Plugin unter http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js.

Auf der HTML-Seite werden die JS-Files nun im Header eingebunden. Ausserdem bindet Ihr ein CSS ein, das Ihr Euch am besten direkt von http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/ holt:

<html>
<head>
<title>jquery ui form test</title>
<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="/styles/ui_sunny.css" type="text/css" media="all" />
</head>

Im Body wird das Formular gecodet. Das Vor-Belegen der beiden Formularfelder mit dem aktuellen Datum (und dem aktuellen Datum plus 1 Tag), sowie das Handling für Formular anzeigen/Formular bearbeiten habe ich hier mit Coldfusion gelöst, kann man ja jeweils auch in der Lieblings-Sprache seiner Wahl umsetzen:

<body>
<cfset currentDateFrom = createODBCDate(now()) />
<cfset currentDateFrom = DateFormat(currentDateFrom,"dd-mm-yyyy") />
<cfset currentDateTo = createODBCDate(now()) + 1 />
<cfset currentDateTo = DateFormat(currentDateTo,"dd-mm-yyyy") />

<cfif cgi.REQUEST_METHOD eq "POST">
<cfdump var="#form#">
<cfelse>
<script type="text/javascript">
$(function() {
$("#datepickerFrom").datepicker({ dateFormat: 'dd-mm-yy' });
$("#datepickerTo").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<form name="DateForm" method="post" action="#cgi.script_name#">
<p>
<label for="datepickerFrom">Start-Datum:</label>
<input class="inputDate" id="datepickerFrom" name="datepickerFrom" style="width:100px" value="<cfoutput>#currentDateFrom#</cfoutput>" />
</p>
<p>
<label for="datepickerTo">Ende-Datum:</label>
<input class="inputDate" id="datepickerTo" name="datepickerTo" style="width:100px" value="<cfoutput>#currentDateTo#</cfoutput>" />
</p>
<p><input type="submit" value="Auswertung starten" /></p>
</form>
</cfif>
</body>
</html>
Hier ist der Aufruf des Datepickers an die Formular-Elemente mit den ID’s „datepickerFrom“ und „datepickerTo“ gebunden, als zusätzlicher Paramter wird das Datum in einem bestimmten Format festgelegt. Ein schöne Übersicht aller möglichen Attribute, Events und Methoden ist unter http://jqueryui.com/demos/datepicker/ zu finden. Unter dieser Adresse gibt es auch eine Demo von allen möglichen schicken UI-Themes.

Als Ergebnis erhalten wir also nun ein Formular mit 2 Datumswahl-Feldern, nach dem Abschicken wir nur ein Dump des Formular-Objekts angezeigt. Das sollte als Grundgerüst für den weiteren Ausbau genügen – viel Spass damit.