Als Domino web developers maken we steeds dynamischere webapplicaties. Op het moment dat een site-bezoeker ergens klikt of iets selecteert, moet vaak dynamisch iets veranderen in de content van de webpagina of moeten er bepaalde dingen van kleur veranderen of juist helemaal niet getoond worden. Om dit allemaal mogelijk te maken gebruiken we vaak JavaScript. Er zijn intussen verschillende JavaScript frameworks ontwikkeld om dit gemakkelijker te maken.
jQuery
jQuery is zo'n JavaScript framework. Met jQuery kunt u snel en gemakkelijk HTML elementen selecteren om deze vervolgens in een klap te wijzigen.
Voorbeeld:
| $("input").css( { border: 'solid red 1px;' }) |
Bovenstaand jQuery statement, zal alle input elementen in een keer rood omkaderen. In dit voorbeeld passen we dus de css eigenschappen van een aantal elementen aan.
We kunnen echter ook de inhoud aanpassen:
| $("div").html("Dit is een div"); |
Met dit voorbeeld wordt de HTML (innerHTML) in alle div elementen overschreven met de 'Dit is een div'.
In beide voorbeelden gebruiken we steeds de $ functie, gevolgd door een elementnaam. Dit is de selector. We gebruiken in beide voorbeelden steeds de tag name om elementen te selecteren. In ons eerste voorbeeld elementen met als tagname input en in ons tweede voorbeeld elementen met als tagname div. We kunnen echter ook op andere zaken selecteren, zoals:
- op waarde van een attribute zoals name of type
- op classname
- op id
- . . .
Verder kunnen zaken ook leuk gecombineerd worden:
| $("div").html("Dit is een div").filter("#errorPanel").css( { border : 'solid red 1px '}) |
Alle div's krijgen de tekst “Dit is een div” en de div met als id errorPanel krijgt een rode omkadering.
Even een eenvoudige jQuery toepassing. Hieronder is de HTML listing van een formulier met 4 velden opgenomen. Echter het 'naam partner' veld hoeft pas te worden getoond, als de gebruiker heeft aangegeven een partner te hebben. De $(document).ready functie zal pas worden uitgevoerd als het document is geladen. Op het moment van het onclick event van alle input elementen wordt de naam partner aangepast. Dit doen we met $("input[name=partner]").click. Als parameter van click kan een functie worden opgegeven. Is er geen parameter gegeven, dan wordt het click event getriggerd. De waarde van het partnerveld wordt met $("input[name=partner]:checked").val() opgehaald. Deze constructie werkt overigens alleen bij een radio button goed. Dit komt omdat de valmethode alleen de waarde (value) van het eerste element wat voldoet aan de selectievoorwaarden teruggeeft. Met show en hide zullen de elementen welke voldoen aan de selectie worden getoond of juist worden verborgen.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type=text/javascript>
$(document).ready(function(){
$("input[name=partner]").click(function(event){
var partnerRow = $("#partnerRow");
if( $("input[name=partner]:checked").val() == "Ja" ) {
partnerRow.show();
} else {
partnerRow.hide();
}
});
})
</script>
<title>JQuery voorbeeld</title>
</head>
<body>
<form method="post" action="http://mydominoserver/database.nsf/person?createdocument">
<table>
<tr>
<td>naam</td>
<td><input type=text name="naam" /></td>
</tr>
<tr>
<td>adres</td>
<td><input type=text name="adres" /></td>
</tr>
<tr>
<td>heeft u een partner?</td>
<td>
<input type=radio name="partner" value="Ja" />Ja
<input type=radio name="partner" value="Nee" />Nee
</td>
</tr>
<tr id="partnerRow" style="display:none;">
<td>naam partner</td>
<td>
<input type=text name="naamPartner" value="" />
</td>
</tr>
</table>
<input type=button id="clickButton" />
</form>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel" id="errorPanel"></div>
</body>
</html> |
jQuery met AJAX
jQuery kan ook erg behulpzaam zijn als we aan de slag gaan met AJAX.
Stel we willen graag een picklist maken in HTML. Dit kan vrij eenvoudig met Jquery.
function picklist( url, colNo, okPressedEvent ) {
$.getJSON(url, function(data){
$("body").append('<div id="listDiv"></div>');
var listDiv = $("#listDiv");
listDiv.append("<ul></ul>");
var lookupContainer = $("#listDiv>ul");
$.each(data.viewentry, function( i, viewentry){
var personName = viewentry.entrydata[colNo].text[0];
lookupContainer.append('<li><input name="lookupValue" type=checkbox value="' + personName + '">' + personName + '</li>');
})
listDiv.append('<input type=button value="ok" id="lookupOK">');
listDiv.append('<input type=button value="cancel" id="lookupCancel">');
$("#lookupOK").click(function(event){
var values = [];
$("input[name=lookupValue]:checked").each(function(index){
values[index]=this.value;
})
$("#listDiv").remove();
okPressedEvent( values );
});
$("#lookupCancel").click(function(event){
$("#listDiv").remove();
});
});
} |
Deze functie kan als volgt worden aangeroepen:
picklist("/names.nsf/people?readviewentries&outputformat=json",1,
function(values){ alert(values.join(','))}); |
De functie verwacht een url welke de viewentries van een view teruggeeft in json formaat. Met de Jquery append functie kan HTML worden toegevoegd aan de elementen welke voldoen aan de selectie voorwaarde. De functie toont dus geen echte dialogbox maar voegt HTML aan het huidige document toe om personen te kunnen selecteren. Door een stylesheet kan worden geregeld dat de picklist er uiteindelijk toch als een dialogbox uitziet.
Met getJSON is het mogelijk via een AJAX call JSON data op te halen. function(data) wordt hierbij aangeroepen op het moment de data is ontvangen en verwerkt. Met $.each kunt u gemakkelijk door een array lopen. In de $.each(data.viewentry, function( i, viewentry) wordt de data welke is ontvangen uitgelezen. Voor elke viewentry wordt een li element met daarin weer input element gegenereerd met de waarde van gevraagde view kolomnummer gegenereerd. Tenslotte wordt er een ok button gemaakt en een cancel button. Bij de ok button wordt de picklist van het scherm verwijderd met remove en vervolgens de opgegeven okPressedEvent functie uitgevoerd.
We zouden deze functie kunnen gebruiken om bij het naam veld een lookup mogelijkheid aan te bieden. Het resultaat is dan onderstaande HTML listing:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<link rel="stylesheet" href="jq.css" />
<script type=text/javascript>
function picklist( url, colNo, okPressedEvent ) {
$.getJSON(url, function(data){
$("body").append('<div id="listDiv"></div>');
var listDiv = $("#listDiv");
listDiv.append("<ul></ul>");
var lookupContainer = $("#listDiv>ul");
$.each(data.viewentry, function( i, viewentry){
var personName = viewentry.entrydata[colNo].text[0];
lookupContainer.append('<li><input name="lookupValue" type=checkbox value="' + personName + '">' + personName + '</li>');
})
listDiv.append('<input type=button value="ok" id="lookupOK">');
listDiv.append('<input type=button value="cancel" id="lookupCancel">');
$("#lookupOK").click(function(event){
var values = [];
$("input[name=lookupValue]:checked").each(function(index){
values[index]=this.value;
})
$("#listDiv").remove();
okPressedEvent( values );
});
$("#lookupCancel").click(function(event){
$("#listDiv").remove();
});
});
}
$(document).ready(function(){
$("input[name=partner]").click(function(event){
var partnerRow = $("#partnerRow");
if( $("input[name=partner]:checked").val() == "Ja" ) {
partnerRow.show();
} else {
partnerRow.hide();
}
});
$("#NameLookupButton").click( function(){
picklist("/names.nsf/people?readviewentries&outputformat=json",1,
function(values){
$("input[name=naam]").val( values.join(",") );
});
});
})
</script>
<title>JQuery voorbeeld</title>
</head>
<body>
<form method="post" action="http://mydominoserver/database.nsf/person?createdocument">
<table>
<tr>
<td>naam</td>
<td><input type=text name="naam" /></td>
<td><input type=button value="looup" id="NameLookupButton"></td>
</tr>
<tr>
<td>adres</td>
<td colspan=2><input type=text name="adres" /></td>
</tr>
<tr>
<td>heeft u een partner?</td>
<td colspan=2>
<input type=radio name="partner" value="Ja" />Ja
<input type=radio name="partner" value="Nee" />Nee
</td>
</tr>
<tr id="partnerRow" style="display:none;">
<td>naam partner</td>
<td colspan=2>
<input type=text name="naamPartner" value="" />
</td>
</tr>
</table>
</form>
</body>
</html> |
Door het toevoegen van style regels voor div#listDiv, div#listDiv ul, div#listDiv ul li kan het een en ander wat fraaier worden gemaakt. Dan zou het er bijvoorbeeld zo uit kunnen zien:
