By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,129 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

executing javascript set with innerHTML in IE 7

P: n/a
I can't for the life of me figure out how to execute javascript inside
of div that was set using innerHTML or in my case using cloneNode and
replaceChild (not my idea to do this, I'm just fixing it). I have
tried it with and without the defer attribute. It will work fine in
firefox, but not IE.

<script type="text/javascript">
function setInnerHTMLAndExecScript (element, html) {
var newElement = element.cloneNode(false);
newElement.innerHTML = html;
element.parentNode.replaceChild(newElement,
element);
}

function loadDiv() {

var myHtml = '<script type="text\/javascript"
defer="defer">function testMe() {alert(\'test called\')}<\/
script><input type="button" value="test me" onclick="testMe();">';

setInnerHTMLAndExecScript(document.getElementById( 'myDiv'),myHtml);
}
</script>

<body onload="loadDiv();">
<div id="myDiv"></div>
</body>

Jul 14 '08 #1
Share this Question
Share on Google+
6 Replies


P: n/a
ca********@gmail.com wrote:
I can't for the life of me figure out how to execute javascript inside
of div that was set using innerHTML or in my case using cloneNode and
replaceChild (not my idea to do this, I'm just fixing it). I have
tried it with and without the defer attribute. It will work fine in
firefox, but not IE.
If it works in Firefox (which version?), you should consider that a happy
coincidence. You are dealing with a proprietary feature here. There is
nothing that guarantees a script that is included this way to be executed.
<script type="text/javascript">
function setInnerHTMLAndExecScript (element, html) {
var newElement = element.cloneNode(false);
You should indent (posted) code with two or four spaces per indentation
level instead. This way, in contrast to the Tab character, it is posted
and displayed uniformly among user agents, which makes it easier to read
(and to adapt). See also <http://www.jibbering.com/faq/#FAQ2_3and the
links therein.
newElement.innerHTML = html;
element.parentNode.replaceChild(newElement,
element);
}
This shallow cloning x as y, setting the content of y, and then replacing x
with y strikes me as being quite inefficient, to say the least. Changing
the content of x in the first place, i.e.

function setInnerHTMLAndExecScript(element, html)
{
element.innerHTML = html;
}

would probably have sufficed. However, one wants to use something
standards-compliant, like

var c;
while ((c = element.firstChild)) element.removeChild(c);

var input = element.appendChild(document.createElement("input" ));
input.type = "button";
input.value = "test me";

_global.testMe = function() {
window.alert("test called");
};

input.addEventListener("click", function() { _global.testMe(); }, false);

instead, whereas `global' can be a reference to the Global Object or to any
other user-defined object. Since (AFAIK) MSHTML does not support
EventTarget::addEventListener(), and addEvent() is buggy, you will need the
equivalent of

input.onclick = function() {
window.alert("test called");
};

as an alternative approach in that case.
HTH

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Jul 14 '08 #2

P: n/a
Thanks, and thank you for the tip of indenting code (I use tabs in my
editor)

when I try your code:

Firefox 3 complains of _global not being defined

Internet Explorer complains "could not get the type property"

Any ideas?

Jul 14 '08 #3

P: n/a
ca********@gmail.com wrote:
Thanks, and thank you for the tip of indenting code (I use tabs in my
editor)
You are welcome. Please also take heed of the recommendations about proper
quoting.
when I try your code:

Firefox 3 complains of _global not being defined
This is not a code factory; you should read postings more thoroughly:
>[...] whereas `global' can be a reference to the Global Object or to
any other user-defined object. [...]
I used `_global' in the code and `global' in the explanation, but you should
get the picture anyway.
Internet Explorer complains "could not get the type property"
Sorry, I forgot to consider a peculiarity of MSHTML that requires you to set
the `type' property of the object before you insert it in the DOM tree.
Therefore, this should work (tested positive in IE 7.0.5730.11):

var input = document.createElement("input");
if (input)
{
input.type = "button";
element.appendChild(input);
input.value = "test me";
}

The additional type-converting test here is useful in any case. Don't
forget to add runtime feature tests at least for all method calls.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jul 14 '08 #4

P: n/a
On Jul 14, 2:21*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
You are welcome. *Please also take heed of the recommendations about proper
quoting.
I love usenet!

This is not a code factory; you should read postings more thoroughly:

I used `_global' in the code and `global' in the explanation, but you should
get the picture anyway.
It's not a matter of not reading thoroughly, I will admit that after
over 10 years of exposure to the DOM, it and its functions, elements,
scopes, references, and after you add the cross-browser
inconsistencies - still leaves me confused. It's my comprehension that
is lacking.
>
Sorry, I forgot to consider a peculiarity of MSHTML that requires you to set
the `type' property of the object before you insert it in the DOM tree.
Therefore, this should work (tested positive in IE 7.0.5730.11):

* var input = document.createElement("input");
* if (input)
* {
* * input.type = "button";
* * element.appendChild(input);
* * input.value = "test me";
* }
This did actually work for both IE and Firefox, however...

Setting up the function and appending it to the input won't work for
my real-case scenario. Popping up a window is not what I'm really
trying to achieve. The script is already set in the html that I'm
returning from an Ajax call and it needs to run inside the div that I
insert it to. I didn't write any of this btw, I wouldn't have used
Ajax.

So I'll ask again if anyone else knows - is there any way to have
javascript execute if it's dynamically written to a div? For example,
html, with a script in it, returned from an Ajax response, inserted
into a div.

Jul 14 '08 #5

P: n/a
ca********@gmail.com wrote:
Thomas 'PointedEars' Lahn wrote:
>This is not a code factory; you should read postings more thoroughly:

I used `_global' in the code and `global' in the explanation, but you
should get the picture anyway.

It's not a matter of not reading thoroughly, I will admit that after over
10 years of exposure to the DOM, it and its functions, elements, scopes,
references, and after you add the cross-browser inconsistencies - still
leaves me confused. It's my comprehension that is lacking.
Well, what exactly do you not understand?
[...]
Setting up the function and appending it to the input won't work for my
real-case scenario. Popping up a window is not what I'm really trying to
achieve. The script is already set in the html that I'm returning from an
Ajax call and it needs to run inside the div that I insert it to. I
didn't write any of this btw, I wouldn't have used Ajax.
IMHO the best way to use the current approach is to have the HTTP server
respond with a message containing JSON for an object that has properties
both for the function code and for the HTML code. Then evaluate the
function code from the former and create the DOM nodes from the latter. WFM.

<http://json.org/>
So I'll ask again if anyone else knows - is there any way to have
javascript execute if it's dynamically written to a div? For example,
html, with a script in it, returned from an Ajax response, inserted into
a div.
What you are asking for exactly apparently cannot be done both reliably and
efficiently. So you will have to adapt your client-side *and* server-side
code to achieve production quality.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jul 15 '08 #6

P: n/a
On Jul 14, 3:40*pm, cantrel...@gmail.com wrote:
I can't for the life of me figure out how toexecutejavascript inside
of div that was set using innerHTML or in my case using cloneNode and
replaceChild (not my idea to do this, I'm just fixing it). I have
tried it with and without the defer attribute. It will work fine in
firefox, but not IE.
The fact it works in Firefox is strangely odd. Search the archives for
loadHTMLFragment and my name. The articles you find, and the links
within them, will explain why it doesn't work and ways to get it to
work. The function loadHTMLFragment does pretty close to what you are
wanting to do. Instead of calling someElement.innerHTML =
someFragment;, you would do loadHTMLFragment(elemID,someFragment) and
the function does the rest.

http://groups.google.com/group/comp....4ddde766fc0caf

Good luck with it.

Randy
Jul 22 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.