Ik probeer m'n eerste schreden met ajax te zetten.
Nu heb ik de tutorial alhier meermalen doorgenomen, weken zitten puzzelen, en heb al aardig resultaat geboekt, vind ik zelf.
Op deze site heb ik een invoerveld waar je een id in kan vullen, waarna bij verlaten van het veld de bijbehorende naam verschijnt.
Het is de bedoeling dat gebruikers hiermee hun groep kunnen aangeven.
Probleem is dat nadat een nieuw veld is toegevoegd, de voorgaande velden wel gewijzigd kunnen worden (mag ook) maar de namen worden niet meer bijgwerkt.
Ook is het niet handig dat de waarde die eerder is ingevoerd wordt meegenomen naar het nieuwe veld.
Kan iemand mij richting geven waar ik het zoeken moet?
Na het rippen van jou pagina heb ik hem even aangepast, met dit als resultaat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="ImageToolbar" content="false" />
<meta name="description" content="persoonlijke probeerpage" />
<meta name="keywords" content="" />
<meta name="author" content="Jos van Dragt" />
<meta name="robots" content="noindex, nofollow" />
<title>www.vanDragt.nl</title>
<link rel="stylesheet" type="text/css" href="../opmaak.css" media="screen, projection" />
<!-- <link rel="shortcut icon" href="http://www.vandragt.nl/favicon.ico" /> -->
<link rel="start" href="http://www.vandragt.nl/" />
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<script type="text/javascript">
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>
<script type="text/javascript">
<!--
var url = "http://www.vandragt.nl/scripts/ajaxlookup_getdata.php?id="; // server-side script
function updatedata(what) {
var idwaarde = document.getElementById('naamid['+what+']').value;
http.open("GET", url + escape(idwaarde), true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
// Zet de teruggeven waarde in een array
results = http.responseText.split(",");
// Zet waarde 0 in naamveld
document.getElementById('naam['+what+']').value = results[0];
}
}
http.setRequestHeader("Cache-Control", "no-cache");
http.setRequestHeader("X_USERAGENT", "AJAX");
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // create HTTP Object
var cnt = 0;
var crnt = 0;
function AddField(copy,paste,baseid){
if(document.getElementById(copy)){
crnt=cnt;
cnt++;
newid = baseid+cnt;
var type = document.getElementById(copy).nodeName; // get the tag name of the source copy.
var but = document.createElement('input');
var br = document.createElement('br');
but.type = 'button';
but.value = 'x';
but.className = 'button';
but.onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); };
var destination = document.getElementById(paste);
var source = document.getElementById(copy).cloneNode(true);
document.getElementById('naamid['+crnt+']').name=cnt;
document.getElementById('naamid['+crnt+']').id='naamid['+cnt+']';
document.getElementById('naam['+crnt+']').name=cnt;
document.getElementById('naam['+crnt+']').id='naam['+cnt+']';
var newentry = document.createElement(type);
newentry.appendChild(source);
newentry.value='';
newentry.appendChild(but);
newentry.appendChild(br);
//newentry.innerHTML = newentry.innerHTML.replace(new RegExp(baseid, 'g'), newid);
//newentry.id=newid;
newentry.id = newid;
destination.appendChild(newentry);
}
}
// -->
</script>
</head>
<body>
<div id="head">
</div>
<div id="content">
<h1>AJAX lookup-applicatie</h1>
<br />
<form action="post">
<p>Vul groepsleden in [1..9]</p>
<div id="groep" >
<span id="groepslid">
<input type="text" name="0" id="naamid[0]" size="5" onblur="updatedata(this.name);" /><input type="text" name="0" id="naam[0]" readonly="readonly" />
</span>
<br />
</div>
<div>
<input type="button" class="button" value="voeg een groepslid toe" onclick="AddField('groepslid','groep',0);" />
</div>
</form>
</div>
<div id="menu">
<!--
MENU
<a href="#" title="Dummy">Dummy</a>
-->
</div>
<div id="picmenu">
</div>
<div id="foot">
<a href="http://validator.w3.org/check/referer" class="plain"><img src="../images/xhtml11.png" alt="Valid XHTML 1.1" title="Valid XHTML 1.1" style="width:80px; height:15px;" /></a>
</div>
</body>
</html>
<!-- Page executed in 0.0256 seconds // -->
Beetje slordig opgelost door via name ook nog eens het id mee te geven, maar het werkt wel... Ik kan om een reden met FireFox geen verbinding maken met je server via dit script, terwijl dit wel met IE kan, maar waarschijnlijk werkt het wel op je eigen server ;) -
[edit]Norton IS-javascript codes weggehaalt
[edit]Aantal test codes verwijdert;)
[edit]Nog een aantal test codes en test-functie weggehaalt ;)[/edit][/edit][/edit]
