innerHTML and SCRIPT tag

[PJ]

Greetings...

I have stumbled upon a small problem.

I use Ajax to retrieve part of a page I need to update. I update a DIV
element with the HTML contents I get from another page.

It works fine.

However the HTML have a SCRIPT tag that the browser should process, but
it doesn't.

Here's an example:

--- pageX.aspx ---
<table>
<tr>
<td>Table 01</td>
</tr>
</table>
<script>
alert("HI");
</script>
--- end pageX.aspx ---

--- page on browser ---
<div id="divContents "></div>

<script>
divContents.inn erHTML = getHtmlFromPage ("pageX.aspx ");
</script>
--- end page on browser ---

When the prowser gets the "pageX.aspx " and updates the contents of the
'divContents' it displays the table, but it didn't process the script.

What am I doing wrong?

Regards,

PJ
http://pjondevelopment.50webs.com

[Randy Webb]

PJ said the following on 7/19/2006 10:43 AM:

Greetings...

I have stumbled upon a small problem.

I use Ajax to retrieve part of a page I need to update. I update a DIV
element with the HTML contents I get from another page.

It works fine.

It works in IE, it won't work in any other browser since you are relying
on an IE-shortcut to get a reference to the div tag.

However the HTML have a SCRIPT tag that the browser should process, but
it doesn't.

Script blocks inserted via innerHTML don't get executed in any browser
other than NS6

<snip>

When the prowser gets the "pageX.aspx " and updates the contents of the
'divContents' it displays the table, but it didn't process the script.
What am I doing wrong?

You will have to search through your HTML block and find the script
elements and insert them using createElement to get the script blocks
executed.

var d =
document.getEle mentById('divCo ntents').getEle mentsByTagName( "script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.create Element('script ');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getEle mentById('divCo ntents').append Child(newScript );

}
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[petermichaux]

Randy Webb wrote:

You will have to search through your HTML block and find the script
elements and insert them using createElement to get the script blocks
executed.

var d =
document.getEle mentById('divCo ntents').getEle mentsByTagName( "script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.create Element('script ');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getEle mentById('divCo ntents').append Child(newScript );

I haven't seen this method before. I've been taking another approach
that uses eval and wonder if one way is superiour (faster, more robust
etc).

function update(element, html) {
document.getEle mentById(elemen t).innerHTML=ht ml;

var re = /<script\b[\s\S]*?>([\s\S]*?)<\//ig;
var match;
while (match = re.exec(html)) {
eval(match[1]);
}
};

Thanks,
Peter

[Richard Cornford]

pe**********@gm ail.com wrote:

Randy Webb wrote:

>You will have to search through your HTML block and find
the script elements and insert them using createElement to
get the script blocks executed.

var d =
document.getEl ementById('divC ontents').getEl ementsByTagName ("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.create Element('script ');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getEl ementById('divC ontents').appen dChild(newScrip t);

I haven't seen this method before. I've been taking another approach
that uses eval and wonder if one way is superiour (faster, more robust
etc).

function update(element, html) {
document.getEle mentById(elemen t).innerHTML=ht ml;

var re = /<script\b[\s\S]*?>([\s\S]*?)<\//ig;
var match;
while (match = re.exec(html)) {
eval(match[1]);
}
};

They are not equivalent so comparison is irrelevant. If you - eval -
code - var - will create function local variables instead of global ones
and function declarations will be inner functions not global ones.

Richard.

[Randy Webb]

pe**********@gm ail.com said the following on 7/19/2006 8:27 PM:

Randy Webb wrote:

>You will have to search through your HTML block and find the script
elements and insert them using createElement to get the script blocks
executed.

var d =
document.getEl ementById('divC ontents').getEl ementsByTagName ("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.create Element('script ');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getEl ementById('divC ontents').appen dChild(newScrip t);

I haven't seen this method before. I've been taking another approach
that uses eval and wonder if one way is superiour (faster, more robust
etc).

Yes, one way is superior to the other. You can read Richard's reply for
an explanation of the scope issues involved with the eval portion.

Second. Where is your script block appended? And, how would you go about
removing it? With the above code, you can simply set the innerHTML of
divContents to '' and you have removed *all* script blocks that were
appended. Meaning, when a new request is made, you are not retaining all
of your old script blocks but they are discarded.

And that is not even getting into the aspects of eval.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[petermichaux]

Second. Where is your script block appended?

If I do

var d = document.getEle mentById('my_di v');
d.innerHTML = htmlInAjaxRespo nse;

and htmlInAjaxRespo nse has script blocks in it, then are the script
blocks not inside "my_div"? If not where are they? If so then will they
not be removed when I use d=''; ?

Thanks,
Peter

[Randy Webb]

pe**********@gm ail.com said the following on 7/19/2006 10:14 PM:

>Second. Where is your script block appended?

If I do

var d = document.getEle mentById('my_di v');
d.innerHTML = htmlInAjaxRespo nse;

and htmlInAjaxRespo nse has script blocks in it, then are the script
blocks not inside "my_div"?

The code for them is, the code that got executed, and its scope, is not.

If not where are they? If so then will they not be removed when I use d=''; ?

There is a difference between the code you read in and execute (it's
source) and the code that is actually executed, along with it's scope chain.

Besides, even if they are exactly the same results (they aren't always),
the first *has* to be more efficient since it isn't starting up the
parser every time you eval something.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Jim Davis]

"Randy Webb" <Hi************ @aol.comwrote in message
news:3P******** *************** *******@comcast .com...

PJ said the following on 7/19/2006 10:43 AM:

>Greetings...

*snip*

>However the HTML have a SCRIPT tag that the browser should process, but
it doesn't.

Script blocks inserted via innerHTML don't get executed in any browser
other than NS6

One wrinkle to this.

IE will parse/execute a script block injected into a DIV - however you must
first set the innerHTML property to "null" THEN load the content as in:

document.getEle mentById(Elemen tID).innerHTML = null;
document.getEle mentById(Elemen tID).innerHTML = NewContent;

I've not (yet?) been able to get FireFox to do the same thing (at least not
without the kind of DOM parsing you mention).

I use the above extensively in a windowing system for intranet applications
(although this works in a normal HTML file we use it in corporate HTA
applications).

Jim Davis

[Jim Davis]

"Jim Davis" <ne********@vbo ston.comwrote in message
news:dr******** *************** *******@giganew s.com...

"Randy Webb" <Hi************ @aol.comwrote in message
news:3P******** *************** *******@comcast .com...

>PJ said the following on 7/19/2006 10:43 AM:

>>Greetings.. .

*snip*

>>However the HTML have a SCRIPT tag that the browser should process, but
it doesn't.

Script blocks inserted via innerHTML don't get executed in any browser
other than NS6

One wrinkle to this.

IE will parse/execute a script block injected into a DIV - however you
must first set the innerHTML property to "null" THEN load the content as
in:

document.getEle mentById(Elemen tID).innerHTML = null;
document.getEle mentById(Elemen tID).innerHTML = NewContent;

Actually I've fibbed a little. More information:

To get the injected script to actually run in IE you also need to set the
"defer" attribute on the script element to "defer" as in:

<script type="text/javascript" defer="defer">
alert("My Script's a runnin'!");
</script>

So to just let injected script run (in IE) you need to just set the "defer"
attribute.

Setting the innerHTML to null is not actually required to run the script
however it's still a VERY good idea. The reason is because IE will not
automatically over-write any existing functions unless you do this. Setting
the innerHTML to null actually unloads all functions defined in the
DIV-contained script elements and allows new ones of the same name(s) to be
created.

For example if you had a function called "Init()" in multiple pieces of
content IE would always run the first instance loaded into the DIV UNLESS
you "null" the container before loading the subsequent block.

The "pages" in my applications (all content retrieved via an XMLHttpRequest
call and injected into a DIV ) all reference a created psuedo-scope called
"Page" and have certain standardized functions ("Page.Init( )" which
initilizes the page, "Page.Denit ()" which run when the page is unloaded and
"Page.Renit ()" which is run when the page is resurfaced but not reloaded).

The nulling of the container DIV is neccessary to allow the replacement
functions to be properly added to the model.

Jim Davis

[Jim Davis]

"Jim Davis" <ne********@vbo ston.comwrote in message
news:MK******** ************@gi ganews.com...

>

Oh - one other imprtant thing: if you set the injected script to "defer"
then FireFox will run it as well... but it has other troubles with
overwriting functions.

Still if you just plain want to run an "alert()" like the OP then "defer"
seems to be your friend.

Jim Davis