Hello,
I have the following problem:
In a page I insert some HTML with a DIV by AJAX.
Whenever I try to insert other HTML into the content of this DIV by
using innerHTML it doesn't work.
But the strange thing is that after replacing the content of that DIV,
I can read the content and it tells me
the changed content (even though the browser doesn't show the changed
content)
I tested it with IE7 and Firefox and both browsers act the same.
Here is the code of the initial page:
<!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>
<title>Div Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
div#hiddenDiv{
position:absolute;
width:500px;
height:400px;
top:50%;
left:50%;
margin-top:-210px;
margin-left:-310px;
text-align:center;
display:none;
z-index:100;
}
</style>
<script type="text/javascript">
<!--
function doaction(show,queryfile,params) {
ajaxSimpleText(queryfile, 'htmlText');
setHiddenDiv(true);
}
function setHiddenDiv(show){
var htmlDisp = document.getElementById("htmlText").innerHTML;
if(htmlDisp.length > 10){
document.getElementById("hiddenDiv").innerHTML = htmlDisp;
document.getElementById("hiddenDiv").style.display = (show) ?
"block" : "none";
document.getElementById("hiddenDiv").style.zIndex=100;
} else {
setTimeout(function(){setHiddenDiv(true);},1000);
}
}
function changeSlct(sid){
var selected_table = document.getElementById(sid).selectedIndex;
document.getElementById(sid).innerHTML = 'blah';
}
function dispHTML(divid){
alert('innerHTML of DIV ' + divid + ':\n' +
document.getElementById(divid).innerHTML);
}
// -->
</script>
<script language='javascript' type='text/javascript'>
<!--
function ajaxSimpleText(queryfile,divName){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Something went wrong
alert('Your browser broke!');
return false;
}
}
}
if(ajaxRequest){
ajaxRequest.open('GET', queryfile, true);
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
var ajaxDisplay = document.getElementById(divName);
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
}
//-->
</script>
</head>
<body>
<div id="htmlText" style="display:none;"></div>
<div id="hiddenDiv"></div>
<form method="get" name="testform1">
<table cellspacing="5" cellpadding="0" border="0" bgcolor="#AAAAAA"
width="500">
<tr>
<td colspan="2">This form is directly inserted in the original
page<br>Changing the value of '1' should change the 'select' from 2</
td>
</tr>
<tr>
<td style="text-align:right;">1</td>
<td style="text-align:left;">
<select name="slct1" onChange="changeSlct('divslct2');">
<option value="s11">1</option>
<option value="s12">2</option>
</select>
</td>
<td style="text-align:right;">2</td>
<td style="text-align:left;">
<div id="divslct2">
<select name="slct2">
<option value="s21">1</option>
<option value="s22">2</option>
</select>
</div>
</td>
</tr>
</table>
</form>
<input type="submit" onClick="dispHTML('divslct2');" value="show HTML
DIV select 2">
<script type="text/javascript">
<!--
doaction(true,'testform.html','');
//-->
</script>
</body>
</html>
AND this is the inserted content by AJAX:
<br>
<br>
<form method="get" name="testform2">
<table cellspacing="5" cellpadding="0" border="0" bgcolor="#BBBBBB"
width="500">
<tr>
<td colspan="2">This form is inserted in a DIV by using
AJAX.<br>Changing the value of '3' should change the 'select' from 4</
td>
</tr>
<tr>
<td style="text-align:right;">3</td>
<td style="text-align:left;">
<select name="slct3" onChange="changeSlct('divslct4');">
<option value="s31">a</option>
<option value="s32">b</option>
</select>
</td>
<td style="text-align:right;">4</td>
<td style="text-align:left;">
<div id="divslct4">
<select name="slct4">
<option value="s41">a</option>
<option value="s42">b</option>
</select>
</div>
</td>
</tr>
</table>
</form>
<input type="submit" onClick="dispHTML('divslct4');" value="show HTML
DIV select 4">
You can see that the form that has NOT been inserted by AJAX work just
fine.
You can test it online at:
http://adsdev.intelli-gens.com/test.html
I hope someone can clarify where it's going wrong.
Thanks
