 PHP beginner |
|
Hallo,
ik haal dynamisch de content van een div op. In die content zit een formulier dan dmv AJAX verwerkt wordt.
Wat gebeurt er?
Wanneer ik de div "main" dynamisch wil vullen, verschijnt er eerst een ladertje totdat de div gevuld is. Dit werkt.
Dan druk ik op "submit" van het formulier. Die submit zo nu moeten veranderen in de tekst "laden", om dan uiteindelijk de div terug leeg te maken en daar te zetten "formulier verstuurd".
Hier loopt het echter fout  . Na het drukken op de submit, wordt de hele div wel leegmaakt, maar het is net alsof de response functie van de eerste AJAX-actie dan wordt herhaald, want dan komt opeens dat ladertje tevoorschijn (terwijl dat nergens in de 2de AJAX-actie gebruikt wordt).
Mijn code:
de pagina index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="application/x-javascript" src="/ajax/requestobject.js"></script>
<script type="application/x-javascript" src="/ajax/vuldiv.js"></script>
<script type="application/x-javascript" src="/ajax/verstuurform.js"></script>
</head>
<body>
<a href="#" onclick="vuldiv();">Vul de div</a>
<div id="main">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="application/x-javascript" src="/ajax/requestobject.js"></script>
<script type="application/x-javascript" src="/ajax/vuldiv.js"></script>
<script type="application/x-javascript" src="/ajax/verstuurform.js"></script>
</head>
<body>
<a href="#" onclick="vuldiv();">Vul de div</a>
<div id="main">
</div>
</body>
</html>
De pagina formulier.html:
[Hier staat het formulier dan]<br />
<span class="veranderstatus"><input type="button" id="submit" onclick="sendform();" /></span>
[Hier staat het formulier dan]<br />
<span class="veranderstatus"><input type="button" id="submit" onclick="sendform();" /></span>
De pagina vuldiv.js:
function vuldiv()
{
http.open('get', 'formulier.html' );
http.onreadystatechange = toondiv;
http.send(null);
}
function toondiv()
{
if(http.readyState == 4 && http.status == 200)
{
if(http.responseText)
{
document.getElementById('main').innerHTML = http.responseText;
}
}
else
{
document.getElementById('main') = "<img src=\"/ajax/loader.gif\" />";
}
}
function vuldiv() { http.open('get', 'formulier.html' ); http.onreadystatechange = toondiv; http.send(null); } function toondiv() { if(http.readyState == 4 && http.status == 200) { if(http.responseText) { document.getElementById('main').innerHTML = http.responseText; } } else { document.getElementById('main') = "<img src=\"/ajax/loader.gif\" />"; } }
De pagina verstuurform.js:
function sendform()
{
http.open('get', 'verwerk.php' );
http.onreadystatechange = verwerkform;
http.send(null);
}
function verwerkform()
{
if(http.readyState == 4 && http.status == 200)
{
if(http.responseText)
{
document.getElementById('main').innerHTML = http.responseText;
}
}
else
{
document.getElementById('veranderstatus') = "Laden";
}
}
function sendform() { http.open('get', 'verwerk.php' ); http.onreadystatechange = verwerkform; http.send(null); } function verwerkform() { if(http.readyState == 4 && http.status == 200) { if(http.responseText) { document.getElementById('main').innerHTML = http.responseText; } } else { document.getElementById('veranderstatus') = "Laden"; } }
verwerk.php is enkel een echo "Het formulier is verwerkt";
Waar zit de fout?
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
daar is ajax vele malen simpeler.
Actiefste leden van de maand
