Re: innerHTML with AJAX problem

Martin schreef:
On 9 mei, 11:09, Erwin Moller
<Since_humans_read_this_I_am_spammed_too_m...@xxxxxxxxxxxxxxxx> wrote:
Martin schreef:





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
Hi,

Without looking through all your code, I noticed you use JavaScript in
the response that is used to replace the innerHTML.
That doesn't work.

Regards,
Erwin Moller- Tekst uit oorspronkelijk bericht niet weergeven -

- Tekst uit oorspronkelijk bericht weergeven -

Hi Erwin,

But it works just fine for the first form (which is already in the
initial page)

Yes, that is normal HTML.

the second form uses the same functions as the first so it should act
the same way.

I also thought 'it should' untill I tested. ;-)
Never assume too much.

Return this as your AJAX response and place it in a div:
<script type="text/javascript">
alert('Do you see this alert?');
</script>

Try it and you'll see what I mean.

Regards,
Erwin Moller

.

Relevant Pages

  • Re: some validation errors f
    ... an html element and a head element to be "opened". ... The validator will flag an error. ... have a div here, as you have been told a few times before. ... able to use ajax to repace the "content" of that div, ...
    (comp.infosystems.www.authoring.html)
  • innerHTML with AJAX problem
    ... In a page I insert some HTML with a DIV by AJAX. ... var ajaxRequest; // The variable that makes Ajax possible! ...
    (comp.lang.javascript)
  • Re: innerHTML with AJAX problem
    ... In a page I insert some HTML with a DIV by AJAX. ... var ajaxRequest; // The variable that makes Ajax possible! ...
    (comp.lang.javascript)
  • Re: innerHTML with AJAX problem
    ... In a page I insert some HTML with a DIV by AJAX. ...   ajaxSimpleText; ...
    (comp.lang.javascript)
  • Re: Javascript causing CSS margin bug in IE
    ... AJAX transactions and not using the ASP.NET AJAX controls? ... you have an update panel somewhere or the AJAX would not work. ... In this way, if the inner DIV is updated, you do not have to reapply the ...
    (microsoft.public.dotnet.framework.aspnet)