Dynamically switch Javascript

[William Pierce]

Hi,

I have an interesting problem that I am stuck on and was wondering if there
might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will be
well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may be a
string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

I have tried using "eval()" and also constructing a script node dynamically
and both have not worked for me.

Thanks in advance for your help!

-- wp

[Ian Collins]

William Pierce wrote:

Hi,

I have an interesting problem that I am stuck on and was wondering if there
might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will be
well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may be a
string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

I have tried using "eval()" and also constructing a script node dynamically
and both have not worked for me.

You should add a dynamic script tag to the document head, rather than
within the body. I don't know whether this will work using innerHTML,
I've only used DOM calls to add scripts.

--
Ian Collins.

[Randy Webb]

Ian Collins said the following on 9/25/2006 6:24 PM:

William Pierce wrote:

>Hi,

I have an interesting problem that I am stuck on and was wondering if there
might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will be
well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may be a
string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

I have tried using "eval()" and also constructing a script node dynamically
and both have not worked for me.

You should add a dynamic script tag to the document head, rather than
within the body. I don't know whether this will work using innerHTML,
I've only used DOM calls to add scripts.

The only browser that executes script blocks that are inserted via
innerHTML is NS6 and not all releases of NS6 execute them (only the
earliest releases did). You are right about the createElement approach
as being the best solution.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Randy Webb]

William Pierce said the following on 9/25/2006 4:46 PM:

Hi,

I have an interesting problem that I am stuck on and was wondering if there
might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will be
well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may be a
string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

Insert your text string via innerHTML and then strip out the script
elements, create new elements, appendChild them and get them executed.

var d =
document.getElementById('divContents').getElements ByTagName("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById('divContents').appendChild (newScript);
}

With this HTML:

<div id="divContents"></div>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[William Pierce]

Ian,

Thanks for your reply. Let me tell you what I did:

a) My Javascript file "test.js" contains the following code:
function appendChild(node, text) {
if (null == node.canHaveChildren || node.canHaveChildren) {
node.appendChild(document.createTextNode(text));
} else {
node.text = text;
}
}
function Doit()
{
var scr1="<script language=\"JavaScript\"
src=\"http://path/to/url1\"></script>";
var scr2="<script language=\"JavaScript\"
src=\"http://path/to/url2\"></script>";
var x = 1;
var divstring = "";
//dummy just to illustrate dynamic selection of one or the other script
tag...
if ( x == 1 ) {
divstring = scr1;
}
else {
divstring = scr2;
}
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
appendChild(script, document.createTextNode(divstring));
document.getElementsByTagName("head")[0].appendChild(script);
}

b) My HTML page that calls the Javascript code does the following:

It simply calls the function "Doit()" from within the page.

I have two issues with this:

a) First, I get an error from IE complaining about an undefined object when
trying to load the HTML page.

b) How do I assign the content produced by executing the chosen Javascript
to the innerHTML of the "div_2" tag?

Any help you can provide would be great!
wp

"Ian Collins" <ia******@hotmail.comwrote in message
news:4n************@individual.net...

William Pierce wrote:

>Hi,

I have an interesting problem that I am stuck on and was wondering if
there
might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will
be
well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may
be a
string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

I have tried using "eval()" and also constructing a script node
dynamically
and both have not worked for me.

You should add a dynamic script tag to the document head, rather than
within the body. I don't know whether this will work using innerHTML,
I've only used DOM calls to add scripts.

--
Ian Collins.

[William Pierce]

Hi, Randy:

Thanks for your response. I followed your suggestions.

Just to refresh, I have two Javascript strings:

var scr1='<script language="JavaScript" src=http://url1></script>';
var scr2='<script language="JavaScript" src=http://url2></script>';

Now I want to decide at page load time which one of these to process, and
to load the contents of the executed Javascript into my div tag.

So I followed your suggestion:

document.getElementById('div_2').innerHTML = divstring; //divstring is set
to either scr1 or scr2

var d =
document.getElementById('divContents').getElements ByTagName("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
newScript.src = d[x].src; // I added this because my
Javascript does not have any text, just a src attribute...
document.getElementById('divContents').appendChild (newScript);
}

The HTML page simply has <div id='div_2'></div>

I think this was a faithful copy of what you suggested. Let me know if I
made a mistake.

The problem is this: The d.length is 0. So the loop does not even execute.

Any ideas?

One other issue....In my case, the Javascript code does not have any text in
it...just a reference to a src attribute. So I set that

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

William Pierce said the following on 9/25/2006 4:46 PM:

>Hi,

I have an interesting problem that I am stuck on and was wondering if
there might be others who can shed some light....

Basically, within an HTML page, I have a tag that looks as follows:
<div id="xxx">

</div>

A call gets made to a server, and it returns a string. The string will
be well-formed HTML. In most cases, all I do is

document.getElementById("xxx").innerHTML = <string>

However, sometimes, the string that may be returned by the server may
be a string that looks as follows:
<script language="JavaScript" src="path/to/js"></script>

In this case, I need to be able to execute this Javascript and place its
contents inside the "div" tag.

Insert your text string via innerHTML and then strip out the script
elements, create new elements, appendChild them and get them executed.

var d =
document.getElementById('divContents').getElements ByTagName("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById('divContents').appendChild (newScript);
}

With this HTML:

<div id="divContents"></div>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/

[Randy Webb]

William Pierce said the following on 9/25/2006 9:15 PM:

Hi, Randy:

Thanks for your response. I followed your suggestions.

Then please don't top-post here.

Just to refresh, I have two Javascript strings:

var scr1='<script language="JavaScript" src=http://url1></script>';
var scr2='<script language="JavaScript" src=http://url2></script>';

Now I want to decide at page load time which one of these to process, and
to load the contents of the executed Javascript into my div tag.

Why not just document.write the string you want?

<script type="text/javascript">
var scriptToUse = scr1;
if (someConditionToUseScript2IsTrue){
scriptToUse = scr2;
}
document.write(scriptToUse);
</script>

Or, is there more you aren't explaining?

P.S. Drop the language attribute and use the type attribute.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/