innerHTML with embedded JavaScript problem

[wmleler]

I have a web app that uses an AJAX call to receive back a bunch of HTML tagged text, which it then displays in a div. The call looks like this:

document.getElementById('morediv').innerHTML = req.responseText

(morediv is the DIV element where I'm placing the text, req is the request object returned by my AJAX call). So far so good.

The problem is that the HTML text coming back from the AJAX call itself contains simple JavaScript code, properly enclosed inside of a "script" tag. So what I'm getting back is a mixture of HTML and embedded JavaScript.

This functionality is being used to display incoming messages, but in the message is the time-stamp of when the message was created. JavaScript is used to display the time-stamp in the local time zone of the browser (without the server needing to know what time zone the browser is in).

If I look at the output from the message-returning server script in a normal browser, but not using AJAX, it displays just fine. The JavaScript executes properly and the time-stamp displays correctly. But, when I read it using an AJAX call and output it using innerHTML, the following happens:

- In Safari (on Mac), this works great. The JavaScript is interpreted. Yippee!

- In Firefox (either Mac or Windows), the JavaScript doesn't get interpreted. It is just ignored. No time-stamp.

- In Opera (Windows) the same as Firefox.

- In IE 6 (Windows), I get "unknown runtime error".

Any idea how to get this to work? I tried using document.write instead of innerHTML, but this didn't execute the JavaScript either.

It won't work to turn the entire message into JavaScript, eval it, and display the resulting string using innerHTML because I want this to be able to work on browsers that do not support JavaScript or that have it turned off. I judiciously insert "noscript" tags to display the timestamp in GMT in this case. Interestingly, Firefox doesn't display the contents of the noscript tags either.

And I don't really want to use iframes.

One solution would be to parse the HTML myself, remove the JavaScript, eval the JavaScript, and then insert the result back into the HTML. What a pain!

Is there no easier way to do this?

Wm Leler

[felgall]

You could use the proper DOM commands to add the elements into the web page properly. innerHTML doesn't always add everything into the page in a way that allows subsequent processing to work properly and document.write can only be run before the page finishes loading in the first place.