innerHTML with AJAX problem

Martin

unread,

May 9, 2008, 4:24:25 AM5/9/08

to

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" />

function doaction(show,queryfile,params) {
ajaxSimpleText(queryfile, 'htmlText');

setHiddenDiv(true);
}

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>

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>

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

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

Erwin Moller

unread,

May 9, 2008, 5:09:03 AM5/9/08

to

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

Martin

unread,

May 9, 2008, 5:33:39 AM5/9/08

to

On 9 mei, 11:09, Erwin Moller

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

zav...@gmail.com

unread,

May 9, 2008, 6:12:25 AM5/9/08

to

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

zav...@gmail.com

unread,

May 9, 2008, 6:12:37 AM5/9/08

to

On May 9, 11:33 am, Martin <mar...@van-marion.nl> wrote:

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

Robin

unread,

May 9, 2008, 6:23:42 AM5/9/08

to

Martin wrote:
> 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

Martin

unread,

May 9, 2008, 6:37:35 AM5/9/08

to

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

Martin

unread,

May 9, 2008, 6:40:06 AM5/9/08

to

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

Erwin Moller

unread,

May 9, 2008, 7:08:09 AM5/9/08

to

Martin schreef:

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

Martin

unread,

May 9, 2008, 7:51:33 AM5/9/08

to

On 9 mei, 13:08, Erwin Moller

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.

sheldonlg

unread,

May 9, 2008, 8:06:59 AM5/9/08

to

Erwin Moller wrote:
> Martin schreef:

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

This goes along with what I have experienced.

I recently (a few months bsck) started working in an AJAX framework. I
quickly found that if I replaced some php code (while in the app), it
was seen immediately by hitting the element that exercised the existing
js code to exercise that php code. If, however, I replaced the code
that contained the javascript, it was not seen until I reloaded the
entire page.

Laser Lips

unread,

May 9, 2008, 8:09:25 AM5/9/08

to

Why doesnt javascript returned my Ajax execute?

This one had be stumped for a while...

Graham

Matthias Watermann

unread,

May 9, 2008, 7:50:43 AM5/9/08

to

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
/ \

Erwin Moller

unread,

May 9, 2008, 10:16:10 AM5/9/08

to

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.lang.javascript/browse_thread/thread/7fa64dffc0c5297e/201b322d9b372a47?hl=en
or
http://tinyurl.com/6pakdu

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

Regards,
Erwin Moller