[AJAX] Responsetext buiten opgegeven div
Ik gebruik het volgende stukje code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function LoadPage(p_pagina){
var div = document.getElementById("content").style;
var xmlhttp = makeXmlHttp();
document.getElementById("voortgang").src="../graph/voortgang2.png";
document.getElementById("content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("GET", p_pagina, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("content").innerHTML = xmlhttp.responseText;
}
}
div.display = "inline";
xmlhttp.send(null);
}
var div = document.getElementById("content").style;
var xmlhttp = makeXmlHttp();
document.getElementById("voortgang").src="../graph/voortgang2.png";
document.getElementById("content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("GET", p_pagina, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("content").innerHTML = xmlhttp.responseText;
}
}
div.display = "inline";
xmlhttp.send(null);
}
Je zou denken dat de uitvoer van p_pagina in de div content wordt geplaatst. Dit gebeurt echter niet, hij zet de uitvoer eronder. Hoe kan dit?
Alvast bedankt,
Martijn
Deze div staat in mijn pagina:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="enquete-content">
<h2>Welkom</h2>
<p>Er volgen op de komende pagina een aantal vragen. Klik op volgende om te beginnen</p>
<br/>
<p><input type="button" name="volgende" onClick="javascript:LoadPage('vragen.php');" value="Volgende >> "/></p>
</div>
<h2>Welkom</h2>
<p>Er volgen op de komende pagina een aantal vragen. Klik op volgende om te beginnen</p>
<br/>
<p><input type="button" name="volgende" onClick="javascript:LoadPage('vragen.php');" value="Volgende >> "/></p>
</div>
getElementById("content")
Do the math
ik zou graag eens kijken wat dat doet. ik denk dat ik iets gelijkaardigs zoek.
@elias: Ja code staat ergens online, maar ik ben er nog druk mee bezig en geef op dit moment liever de site niet prijs. Ik kan ja wel stukjes code mailen als je dat wilt.
Gewijzigd op 01/01/1970 01:00:00 door Martijn
heb geen ervaring met ajax en ben gewoon wat opzoek naar hoe het allemaal in zijn werk gaat.
style="border : 1px solid #000"
Dan kun je zien of hij er onder komt of dat de positionering van je div niet klopt
Wat ik dan zie is een omlijning van een paar pixels breed en hoog met niks erin, en daaronder staat de ouput
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function makeXmlHttp(){
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
window.alert("Uw browser ondersteunt het XMLHttpRequest object niet!");
}
}
return xmlhttp;
}
function LoadPage(p_pagina){
var div = document.getElementById("enquete-content").style;
var xmlhttp = makeXmlHttp();
document.getElementById("voortgang").src="../graph/voortgang2.png";
document.getElementById("enquete-content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("GET", p_pagina, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("enquete-content").innerHTML = xmlhttp.responseText;
}
}
div.display = "inline";
xmlhttp.send(null);
}
function ValidateForm(form, numQuestions)
{
var ret = true;
// Loop om te checken of alle radio's zijn aangeklikt. Nee? ret = false
// Open vraag check?
if(ret)
{
vraag1 = GetSelectedItem('vraag0', document.frmVragen.vraag0.length);
vraag2 = GetSelectedItem('vraag1', document.frmVragen.vraag1.length);
vraag3 = GetSelectedItem('vraag2', document.frmVragen.vraag2.length);
vraag4 = GetSelectedItem('vraag3', document.frmVragen.vraag3.length);
vraag5 = GetSelectedItem('vraag4', document.frmVragen.vraag4.length);
parameters = 'vraag1='+vraag1+'&vraag2='+vraag2+'&vraag3='+vraag3+'&vraag4='+vraag4+'&vraag5='+vraag5;
// Verzend het formulier
var xmlhttp = makeXmlHttp();
var indicator = document.getElementById("enquete-content").style;
document.getElementById("voortgang").src="../graph/voortgang3.png";
document.getElementById("enquete-content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("POST", "afronden.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("enquete-content").innerHTML = xmlhttp.responseText;
}
}
indicator.display = "inline";
xmlhttp.send(parameters);
}
return ret;
}
function GetSelectedItem(vraag, lengte)
{
var waarde;
// alert(vraag + " " + lengte)
for(i=0; i<lengte; i++)
{
if(document.getElementById(vraag + i).checked)
{
waarde = document.getElementById(vraag + i).value;
}
}
if(waarde == "") {
return false;
}
else
{
//alert(waarde);
return waarde;
}
}
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
window.alert("Uw browser ondersteunt het XMLHttpRequest object niet!");
}
}
return xmlhttp;
}
function LoadPage(p_pagina){
var div = document.getElementById("enquete-content").style;
var xmlhttp = makeXmlHttp();
document.getElementById("voortgang").src="../graph/voortgang2.png";
document.getElementById("enquete-content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("GET", p_pagina, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("enquete-content").innerHTML = xmlhttp.responseText;
}
}
div.display = "inline";
xmlhttp.send(null);
}
function ValidateForm(form, numQuestions)
{
var ret = true;
// Loop om te checken of alle radio's zijn aangeklikt. Nee? ret = false
// Open vraag check?
if(ret)
{
vraag1 = GetSelectedItem('vraag0', document.frmVragen.vraag0.length);
vraag2 = GetSelectedItem('vraag1', document.frmVragen.vraag1.length);
vraag3 = GetSelectedItem('vraag2', document.frmVragen.vraag2.length);
vraag4 = GetSelectedItem('vraag3', document.frmVragen.vraag3.length);
vraag5 = GetSelectedItem('vraag4', document.frmVragen.vraag4.length);
parameters = 'vraag1='+vraag1+'&vraag2='+vraag2+'&vraag3='+vraag3+'&vraag4='+vraag4+'&vraag5='+vraag5;
// Verzend het formulier
var xmlhttp = makeXmlHttp();
var indicator = document.getElementById("enquete-content").style;
document.getElementById("voortgang").src="../graph/voortgang3.png";
document.getElementById("enquete-content").innerHTML = "Pagina wordt geladen. Ogenblik geduld a.u.b.";
xmlhttp.open("POST", "afronden.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
document.getElementById("enquete-content").innerHTML = xmlhttp.responseText;
}
}
indicator.display = "inline";
xmlhttp.send(parameters);
}
return ret;
}
function GetSelectedItem(vraag, lengte)
{
var waarde;
// alert(vraag + " " + lengte)
for(i=0; i<lengte; i++)
{
if(document.getElementById(vraag + i).checked)
{
waarde = document.getElementById(vraag + i).value;
}
}
if(waarde == "") {
return false;
}
else
{
//alert(waarde);
return waarde;
}
}
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>TITEL</title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script language="JavaScript" src="script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background:#bae3f5;
}
html, body {
height: 100%;
}
#site{
width:1150px;
margin:0 auto;
height:100%;
min-height:100%;
}
#container{
background: url(../graph/achtergrond_v.gif);
background-repeat: repeat-y;
min-height: 100%;
width: 750px;
margin:0px;
float:left;
/*border: 1px dashed yellow;*/
}
* html #container{
height: 100%;
}
#left{
margin-right:-4px;
float:left;
}
#logo{
width:750px;
height:142px;
}
#boog{
margin:0px;
}
#content{
padding-top:10px;
width:700px;
font-family:verdana;
font-size:12px;
/*border: 1px dashed blue;*/
float: left;
}
#foto{
float:right;
margin-right: -150px;
margin-top: -20px;
_margin-right: 0px;
_margin-top: 0px;
_padding-right:10px;
}
#wie{
min-height: 120px;
padding-left: 40px;
/*border: 1px dashed blue;*/
}
#enquete-content{
clear: both;
margin-top: 20px;
width: 645px;
/*border: 1px dashed black;*/
padding-left: 40px;
}
#studenten{
margin-top:380px;
float: left;
margin-left:5px;
/*border: 1px solid blue;*/
}
#enquete-voortgang{
/*border: 1px dashed blue;*/
width:665px;
padding-left: 20px;
}
#footer{
width: 680px;
text-align: center;
font-size:10px;
font-family:verdana;
height: 5px;
padding-top: 10px;
margin: -32px auto 0 auto;
}
#clearfooter {
height: 32px;
}
</style>
</head>
<body>
<div id="site">
<div id="left"><img src="../graph/ballen.png" width="200" height="250"></div>
<div id="container">
<div id="logo"><img src="../graph/logo.png" width="750" height="142"></div>
<div id="boog"><img src="../graph/achtergrond_boog.png" width="748" height="31"></div>
<div id="content">
<div id="foto">
<img src="../graph/foto.png" width="316" height="246"/>
</div>
<div id="wie">
<h3>Wat en wie ?</h3>
Hoop geblaat hier.
</div>
<div id="enquete-content">
<h2>Welkom</h2>
<p>Er volgen op de komende pagina een aantal enquete vragen. Klik op volgende om te beginnen</p>
<br/>
<p><input type="button" name="volgende" onClick="javascript:LoadPage('vragen.php');" value="Volgende >> "/></p>
</div>
<div id="enquete-voortgang">
<img src="../graph/voortgang.png" id="voortgang" border="0" width="665" height="70">
</div>
</div>
<div id="studenten">
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head><title>TITEL</title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script language="JavaScript" src="script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background:#bae3f5;
}
html, body {
height: 100%;
}
#site{
width:1150px;
margin:0 auto;
height:100%;
min-height:100%;
}
#container{
background: url(../graph/achtergrond_v.gif);
background-repeat: repeat-y;
min-height: 100%;
width: 750px;
margin:0px;
float:left;
/*border: 1px dashed yellow;*/
}
* html #container{
height: 100%;
}
#left{
margin-right:-4px;
float:left;
}
#logo{
width:750px;
height:142px;
}
#boog{
margin:0px;
}
#content{
padding-top:10px;
width:700px;
font-family:verdana;
font-size:12px;
/*border: 1px dashed blue;*/
float: left;
}
#foto{
float:right;
margin-right: -150px;
margin-top: -20px;
_margin-right: 0px;
_margin-top: 0px;
_padding-right:10px;
}
#wie{
min-height: 120px;
padding-left: 40px;
/*border: 1px dashed blue;*/
}
#enquete-content{
clear: both;
margin-top: 20px;
width: 645px;
/*border: 1px dashed black;*/
padding-left: 40px;
}
#studenten{
margin-top:380px;
float: left;
margin-left:5px;
/*border: 1px solid blue;*/
}
#enquete-voortgang{
/*border: 1px dashed blue;*/
width:665px;
padding-left: 20px;
}
#footer{
width: 680px;
text-align: center;
font-size:10px;
font-family:verdana;
height: 5px;
padding-top: 10px;
margin: -32px auto 0 auto;
}
#clearfooter {
height: 32px;
}
</style>
</head>
<body>
<div id="site">
<div id="left"><img src="../graph/ballen.png" width="200" height="250"></div>
<div id="container">
<div id="logo"><img src="../graph/logo.png" width="750" height="142"></div>
<div id="boog"><img src="../graph/achtergrond_boog.png" width="748" height="31"></div>
<div id="content">
<div id="foto">
<img src="../graph/foto.png" width="316" height="246"/>
</div>
<div id="wie">
<h3>Wat en wie ?</h3>
Hoop geblaat hier.
</div>
<div id="enquete-content">
<h2>Welkom</h2>
<p>Er volgen op de komende pagina een aantal enquete vragen. Klik op volgende om te beginnen</p>
<br/>
<p><input type="button" name="volgende" onClick="javascript:LoadPage('vragen.php');" value="Volgende >> "/></p>
</div>
<div id="enquete-voortgang">
<img src="../graph/voortgang.png" id="voortgang" border="0" width="665" height="70">
</div>
</div>
<div id="studenten">
</div>
</div>
</div>
</body>
</html>
Astu :)