innerHTML with AJAX problem

M

Martin

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
 
E

Erwin Moller

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
 
M

Martin

Martin schreef:































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)
the second form uses the same functions as the first so it should act
the same way.
 
Z

zavagli

Hi Erwin,

But it works just fine for the first form (which is already in the
initial page)
the second form uses the same functions as the first so it should act
the same way.

why not a framework, prototype, mootools, jquery...
 
Z

zavagli

Hi Erwin,

But it works just fine for the first form (which is already in the
initial page)
the second form uses the same functions as the first so it should act
the same way.

why not a framework, prototype, mootools, jquery...
 
R

Robin

Martin said:
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:
[snip]
ajaxSimpleText(queryfile, 'htmlText'); ....
var htmlDisp = document.getElementById("htmlText").innerHTML;
if(htmlDisp.length > 10){
document.getElementById("hiddenDiv").innerHTML = htmlDisp;
[snip]

You appear to be putting the responseText into DIV 'htmlText' then
'hiddenDiv'. You therefore have two DIVs with id 'divslct4' (not legal
as IDs are supposed to be unique). Your code is changing (and reporting
that state of) the hidden one and hence the visible one isn't changing.

Robin
 
M

Martin

Martin said:
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:
[snip]
  ajaxSimpleText(queryfile, 'htmlText'); ...
   var htmlDisp = document.getElementById("htmlText").innerHTML;
   if(htmlDisp.length > 10){
           document.getElementById("hiddenDiv").innerHTML = htmlDisp;

[snip]

You appear to be putting the responseText into DIV 'htmlText' then
'hiddenDiv'. You therefore have two DIVs with id 'divslct4' (not legal
as IDs are supposed to be unique). Your code is changing (and reporting
that state of) the hidden one and hence the visible one isn't changing.

Robin- Tekst uit oorspronkelijk bericht niet weergeven -

- Tekst uit oorspronkelijk bericht weergeven -

Thanks Robin,

I completely missed that point. As the htmlText is set to 'hidden', I
never realised it already contains the div id.
I used this temporary htmlText to check if it has been filled with
conent by AJAX. After is has been filled I put the content in the
hiddenDiv
which I set to show.

Thanks a lot, I feel quite stupid for not realising this.
 
M

Martin

why not a framework, prototype, mootools, jquery...- Tekst uit oorspronkelijk bericht niet weergeven -

- Tekst uit oorspronkelijk bericht weergeven -

I am not using a framewok because I just started to use AJAX for some
simple things.
I will probably start using a framework, but I think using it like
this will improve my understanding
of AJAX and I get to train my understanding of JavaScript at the same
time.
 
E

Erwin Moller

Martin schreef:
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
 
M

Matthias Watermann

On Fri, 09 May 2008 03:12:25 -0700, zavagli wrote:

Does the lack of a realname indicate that you're just trolling around?
[...]
why not a framework, prototype, mootools, jquery...

Could you name one, that's not crap one way or the other?


--
Matthias
/"\
\ / ASCII RIBBON CAMPAIGN - AGAINST HTML MAIL
X - AGAINST M$ ATTACHMENTS
/ \
 
M

Martin

Martin schreef:








Yes, that is normal HTML.


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- Tekst uit oorspronkelijk bericht niet weergeven -

- Tekst uit oorspronkelijk bericht weergeven -

Ah, I se what you mean. Returning javascript by AJAX to be executed.
I understand that won't work indeed :)
But that's not what was trying to do.
I already understood what I did wrong.

Thanks anyway.
 
L

Laser Lips

Why doesnt javascript returned my Ajax execute?

This one had be stumped for a while...

Graham
 
E

Erwin Moller

Laser Lips schreef:
Why doesnt javascript returned my Ajax execute?

This one had be stumped for a while...

Graham


Hi,

Why JavaScript/innerHTML is designed that way, I do not know.

It is possible however to GET it executed anyway.

Randy Webb helped me out some time back with this.

You can find the details in this thread:

http://groups.google.nl/group/comp....hread/7fa64dffc0c5297e/201b322d9b372a47?hl=en
or
http://tinyurl.com/6pakdu

All credits go to Randy, not me. ;-)

Regards,
Erwin Moller
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top