[AJAX] Responsetext buiten opgegeven div - Forum

Jacco Engel

23-04-2008 12:06

5 euro

Martijn

23-04-2008 12:30

Ja dat van die border had ik idd ook geprobeerd. Zo ben ik er ook achtergekomen dat hij de output onder de div gooit ipv erin :S
Wat ik dan zie is een omlijning van een paar pixels breed en hoog met niks erin, en daaronder staat de ouput

J

Jacco Engel

23-04-2008 12:32

Kan ik ergens het hele script zien? (je mag de link ook even pmen)

M

Martijn

23-04-2008 12:48

Komtie Javascript:


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;
	}
}

HTML:


<!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>

Astu :)

e

elias

23-04-2008 13:07

even kleine programmeer tip. zet je css style in een aparte file. net iets poperder en overzichterlijker, net zoals je je JS file apart zet.

M

Martijn

23-04-2008 13:13

I know :) Maar ik vind het fijner werken in het begin.. Later gooi ik altijd alles in apart css bestand. Maar thnx anyway :)

M

Martijn

25-04-2008 11:14

@Jacco... Ben je er nog uitgekomen??