Dynamic insertion and execution of JavaScript

[zarroba]

Hi,
I'm developing a webpage that is composed by several divs. These divs
are supplied by the server depending on the user that made the request.
Some of these divs require some javascript functions to be called when
they are added to the page. I add the content using innerHTML (function
renderPage(data) { document.getElementsByTagName('body')[0].innerHTML =
data; }).
(data:
<div id="id" style="....">
.....
<script type="text/javascript">
initDiv();
</script>
....
</div>

The div is displayed in the page with no problems except for the
javascript functions that is not executed. I know that innerHTML just
replaces the code and do not execute any javascript in it.
Is there any possible way to do this?

thanks,
José Pedro Tavares

[Thomas 'PointedEars' Lahn]

za*****@gmail.com wrote:

I'm developing a webpage that is composed by several divs. These divs
are supplied by the server depending on the user that made the request.
Some of these divs require some javascript functions to be called when
they are added to the page. I add the content using innerHTML (function
renderPage(data) { document.getElementsByTagName('body')[0].innerHTML =
data; }).
(data:
<div id="id" style="....">
....
<script type="text/javascript">
initDiv();
</script>
...
</div>

The div is displayed in the page with no problems except for the
javascript functions that is not executed. I know that innerHTML just
replaces the code and do not execute any javascript in it.
Is there any possible way to do this?

For cross-browser scripting, you would need to attach information to `data'
about the code to be executed before or after you added the content. For
example:

function initDiv()
{
// ...
}

function renderPage(data)
{
if (typeof data.before == "function") data.before();

// probably you want `+=' here instead
document.body.innerHTML = data.content;

if (typeof data.after == "function") data.after();
}

renderPage({
content: '<div id="id" style="...">...</div>',
after: initDiv
});

Probably it would be best if renderPage() was a method of a user-defined
object. And maybe your `div' element does not need an ID.
PointedEars

[zarroba]

Hi and thanks for the fast reply.
I've tried the solution with few success, although the problem may be
in the architecture in use. We are using DWR that generates javascript
functions from Java objects allowing the browser to do remote calls on
Java objects. The call to the renderPage function is generated from one
of these classes and when the function is called both content and after
arguments are of type string. Is there any way for me to force the
after argument to be of type function? (parse of the string and
construction of a script object maybe?

thanks,
José Pedro Tavares

[zarroba]

Well I got it sort of working using Function objects. I have another
problem though. The function is not executed properly because it seems
the includes needed for the function to execute are not interpreted. Do
anyone has a similar problem or knows how can I solve it?

thanks,
José Pedro Tavares