Zwar steht AJAX für Asynchronous JavaScript, aber trotzdem kann man solche Abfragen auch synchron durchführen. Mit jQuery kann man das ganze dabei wie folgt bewerkstelligen:
$.ajax({url: "getName.php",
type: "get",
data:{lang:"american"},
success: function(result){
name=result;
}, async: false});
Wichtig ist, das der Schlüssel async auf false gesetzt ist – das Verhalten ist in neueren Versionen von jQuery als veraltet gekennzeichnet, kann aber noch genutzt werden.
Wenn man native Applikation entwickelt, ist die Wahl der Komponenten für die grafische Oberfläche schnell erledigt. Meinst nimmt man das UI Kit, welches dem „Plattform-Standard“ entspricht. Bei Webseiten bzw. Webbapplikationen ist die ganze Sache komplizierter. Hier gibt es eine Reihe von Lösungen, wie jQuery UI, JxLib, YUI und andere. Eine schöne Alternative zu den genannten Lösungen ist UKI.
Eine UKI Beispielanwendung
Die Bibliothek setzt dabei auf direkt auf Javascript auf und benötigt keine weiteren Frameworks. Das ganze ist unter http://ukijs.org/ zu finden. UKI ist dabei freie Software und steht unter der MIT-Lizenz.
Gegeben sei folgender Quelltext:
<div class="divbox">Wert: 42</div>
In diesem Quelltext sollte der Wert je nach Position eines Sliders anpasst werden. Im ersten Moment versuchte ich es mit der jQuery Funktion replaceWith:
$(".divbox").replaceWith("Wert " + value);
Leider führt diese Methode dazu das der gesamte div Tag ersetzt wird was natürlich nicht erwünscht ist. Zum Glück gibt es in jQuery eine Entsprechung für das innerHTML, diese Funktion hört auf den Namen html:
$(".divbox").html("Wert " + value);
Damit wird nur der Text zwischen den div Tags geändert. Wichtig ist es dabei darauf zu achten das jQuery hier nur die innerHTML Eigenschaft des Browsers durchreicht und dies z.B. dazu führen kann das beim Internet Explorer Attribute in Anführungszeichen zurückgegeben werden.
Weitere Informationen gibt es unter:
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/
Gestern habe ich mich ein wenig mit jQuery beschäftigt. Dazu erst einmal ein kleineres Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#hide").click(function(){
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
})
});
</script>
<title>jQuery Test</title>
</head>
<body>
<div id="valuesInit" style="background-color:#ADADAD">
<p><b>Initialwerte</b></p>
Lorem Ipsum dolor sit amet...
</div>
<p><a href="#" id="hide">Verstecken</a></p>
</body>
</html>
In diesem Beispiel wird eine div Box mit der ID valuesInit und der Klasse divbox angelegt. Oben wird für den Link mit der ID hide eine Klickfunktion definiert. Diese Klickfunktion sucht dabei das Element mit der ID valuesInit und lässt es verschwinden. Nun gibt es verschiedene Möglichkeiten etwa zu selektieren:
$("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
$(".divbox").animate({ height: 'hide', opacity: 'hide' }, 'slow');
Weitere Informationen gibt es unter:
http://docs.jquery.com/Main_Page
http://www.very-clever.com/jquery-tutorial.php
http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/
Manchmal ist es ganz praktisch wenn man aus einer HTML Tabelle eine CSV erstellen kann. Dazu gibt es unter http://www.codekeep.net/snippets/ec9f4704-b88a-486a-98f9-896de6afb021.aspx auch ein schönes Beispiel. Das Problem an diesem Beispiel ist das es nicht funktioniert. Einige Elemente sehen nach jQuery aus, so das man es ohne diese Bibliothek nicht benutzen kann. Mit „normalem“ Javaskript sieht das ganze dann so aus:
function tableRowsToCSV(theRows)
{
// Converts table rows into a csv stream
var csv = "";
for (var r=0;r<theRows.length;r++) {
var csvRow = "";
var theCells = theRows.item(r).cells;
for (var c=0;c<theCells.length;c++) {
var cellData="";
cellData = theCells.item(c).textContent;
//alert(cellData);
if (cellData.indexOf(",") != -1) {
cellData = "'"+cellData+"'";
}
csvRow += ","+cellData;
}
if (csvRow != "") {
csvRow = csvRow.substring(1,csvRow.length);
}
csv += csvRow+"\n";
}
return csv;
}
Der Aufruf der Funktion könnte dann zum Beispiel so aussehen:
var csvText = tableRowsToCSV(document.getElementsByTagName("tr"));
Diesen Text kann man dann in Javaskript weiterverwenden oder ihn z.B. an ein PHP Skript (per POST) schicken, welches das ganze dann zum Download anbietet.