Forum Moderators: open
I was playing around this since a while, without any succes, then I left it as it was. Now I have another place, where it would be quite useful for me.
Let's say, there is an existing div tga.
I give some content to the innerHTML of the div. The new content has soma javascript code, but as we know, the interpreter will not intrpret the new content. How could I get triggered the div tag from "itself"?
I would like to get the alert executed... The text appears, but the alert does not... Any idea. Please help me.
Gregor
<div id="myid">Old content</div>
<script>
oElement = document.getElementById('myid');
oElement.innerHTML='New content<script>new Function("alert(\'I would like to see this\');");<\/script>';
</script>
However, this sort of thing did crop up a while back, which prompted some research, so you might like to have a look at this thread:
[webmasterworld.com...]
1) Make sure that your only recourse is JavaScript. The whole AJAX fluff thing has people forgetting that there's still lots of old browsers and accessibility-challenged people out there.
2) Why bother with innerHTML? You can assign functions to DOM objects in realtime. You could add an "on..." trigger to an HTML element in the innerHTML thing that triggers a function elsewhere.
To Wit:
<div id="myid">Old content</div>
<script type="text/javascript">
// <![CDATA[
var oElement = document.getElementById('myid');
document.variable_function = new Function("alert(\'I would like to see this\');");
oElement.innerHTML='<form action="#" method="get"><div><input type="button" value="Alert" onclick="document.variable_function()" /></div></form>';
// ]]>
</script>
This works fine. I tested it (QUALIFIER: In only one browser).
thanks for everybody for the responses!
Ok that could be a solution, but my goal was that I call a script, which will show the success or error in an innerHTML element, and also it should control some elements - like in case of success: showing success message elsewhere, but when there are errors, then unhide for example the input div, so input will be done again. That is why I wanted to trigger it from the innerHTML.
Now I think that I should forward the result not to innerHTML, but to an src of an iframe. In iframe it will be triggered... Am I right?
G.
Look at the solution I mentioned. Simply create a new function and assign it to the DOM document object.
Send a link out to the innerHTML to trigger the function.
If you need to execute the function right away, then just do so after you create it.
But as you can tell, I'm no good at explaining things, so I refer you to this Wiki article: [ajaxpatterns.org ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
function CreateANewButton(in_old){
in_old.disabled=true;
in_old.value="Spent";
var divvie = document.getElementById('next');
divvie.id = '';
var newbutton = document.createElement('input');
newbutton.type = "button";
newbutton.value = "Create New";
newbutton.onclick = new Function ('CreateANewButton(this);');
divvie.appendChild(newbutton);
var newdiv = document.createElement('div');
newdiv.id = "next";
divvie.parentNode.appendChild(newdiv);
}
// ]]>
</script>
<div>
<form id="test" action="#" method="get"><div id="form_container">
<div><input type="button" onclick="CreateANewButton(this)" value="Create New" /></div>
<div id="next"></div>
</div></form>
</div>
</body>
</html>
Pure DOM construction. VERY powerful. Since this is a JavaScript forum, this is a fairly apropos method. If you rely on JavaScript, why not go all the way?
As someone I knew used to say: "If you're gonna walk on thin ice, you might as well dance."
However, I would first make sure that my only choice was JavaScript.
Thanks for all of the answers.
The final solution was to get the code snipplet from the result, and execute it, and the rest of the result went to the innerHTML.
It works that way... Not too nice, but it works.
From inside the innerHTML content it will never be triggered.
Gergo
