executing javascript set with innerHTML in IE 7

C

cantrell78

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

Thomas 'PointedEars' Lahn

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.
Click to expand...

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);
Click to expand...

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
newElement.innerHTML = html;
element.parentNode.replaceChild(newElement,
element);
}
Click to expand...

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
 
C

cantrell78

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

Thomas 'PointedEars' Lahn

Thanks, and thank you for the tip of indenting code (I use tabs in my
editor)
Click to expand...

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
Click to expand...

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. [...]
Click to expand...
Click to expand...

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"
Click to expand...

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
 
C

cantrell78

You are welcome.  Please also take heed of the recommendations about proper
quoting.
Click to expand...

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.
Click to expand...

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";
  }
Click to expand...

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

Thomas 'PointedEars' Lahn

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.
Click to expand...

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.
Click to expand...

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.

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.
Click to expand...

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
 
R

Randy

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.
Click to expand...

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...f?lnk=gst&q=loadHTMLFragment#994ddde766fc0caf

Good luck with it.

Randy
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript inside innerHTML problem 5
Check forms With JavaScript 1
Set value after clicking in field 11
innerHTML 5
In javascript, XML File Create, File Save 2
Help with code 0
Only one table shows up with the information 2
Add recipes using JavaScript in table 20

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 329

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top