Javascript Div Issues.

November 13, 2006 4:05 PM

Javascript neophyte: How do I swap out the contents of one div with another? But there is a monkey-wrench in the whole thing: the new div

So, this is the situation:
I want to present a picture, which a user can click. When a user clicks that image, the image disappears, and javascript loads up a chunk of html/javascript, in the spot where the image was, that does some fairly fancy javascripty stuff itself, like phpadsnew adlogic, and stuff like that.

The problem I'm having is this: I can get this to work with fairly simple html, using innerHTML, but I run into problems when the html contains javascript, and script tags.

This is the code I'm trying to use:

<div id="DivExample">
<img ="http://ourobouros.net/thingy.gif"
onclick="document.getElementById('DivExample').innerHTML='Hi!<br> this is a test<br><a href=http://google.com>google</a>'">
</div>


And this is the sort of javascript that i'd like to have run when the new html loads in the div:

<SCRIPT SRC="http://example.com/random.js" LANGUAGE="JavaScript"></SCRIPT>

I've thought of a couple of possible solutions: iframes, calling another page, with the correct html and javascript, altering the html/javascript with html entities so that javascript doesn't choke on some character somewhere.

I'm pretty much a complete noob, but fairly conversant with php. Any help would be greatly appreciated.

posted by Freen to Computers & Internet (12 answers total)

My first thought is, don't conditionally load the javascript when the user clicks the link. Put that script tag at the top of the page, put the code you want to run (in random.js) in a function, and call that function when the user clicks the image (put another way, in the onclick attribute of the img tag, add ";doStuff()" at the end, and define doStuff() in random.js, and put the script tag loading random.js at the top of the page).
posted by jlub at 4:35 PM on November 13, 2006

Response by poster: jlub: that'd work, but unfortunately, I don't have control on the random.js. It's our adservers's JS. I don't want it to load, or run, until the image has been clicked.
posted by Freen at 4:40 PM on November 13, 2006

I'd try making it an iframe. On click set the iframs's .location (or .location.href) to a data url (see the kitchen to make one) that holds the new html and script reference.

But that would work only if you want random.js to be only active in the iframe, not for the whole page.
posted by MonkeySaltedNuts at 5:14 PM on November 13, 2006

Another option would be to copy the code from random.js, put it in a function within your script, and run it onclick.
posted by scottreynen at 5:26 PM on November 13, 2006

Just escape your quotes and closing slashes:

onclick="document.getElementById('DivExample').innerHTML='Hi!
this is a test
google< \/a>'"
posted by mkultra at 5:29 PM on November 13, 2006

Oh, dear, that got mangled.

onclick="document.getElementById('DivExample').innerHTML='Hi!<br> this is a test<br><a href=\"http://google.com\">google<\/a>'"
posted by mkultra at 5:31 PM on November 13, 2006

Best answer: mkultra, whatever you are trying to say, I think for many browsers you can't depend on including <script> tags in an .innerHTML assignment to have any effect (such as being evaluated) other than adding to the DOM structure.

While <script> tags are part of the HTML DOM, that may just be as an artifact and for inspection purposes. What <script> tags really are are escapes in the HTML stream that say "run this javascript now". They do not wait until the HTML is fully parsed before they are run, and with the awful document.write they can actually write further HTML to parse.
posted by MonkeySaltedNuts at 6:10 PM on November 13, 2006

Response by poster: MonkeySaltedNuts: That is precisely my problem.

random.js should only be active in the iframe, and so i'm going to try out your solution... I'll let you know how it goes.
posted by Freen at 6:26 PM on November 13, 2006

Response by poster: MSN:the area that someone is going to click is an image, and then that area becomes the iframe with the random.js in it.

How would I swing that? Would I have to put it in an iframe originally?
posted by Freen at 6:55 PM on November 13, 2006

#Freen: Would I have to put it in an iframe originally?

Yeah.

lets say that "img1" is a pointer to the <img> in the iframe. Then you can add img1.addEventListener("click", mySwapper, null)
to say that whenever someone clicks on "img1" that the function "mySwapper" should be run.
posted by MonkeySaltedNuts at 7:51 PM on November 13, 2006

You could try evaluating the javascript using the EVAL function

divExample.onclick = function() {
this.innerHTML = eval(your javascript here);
}

Using innerHTML often doesn't do the expected when adding stuff to the page DOM - it's almost like it just dumps a bunch of character data into the parent element.
posted by whoojemaflip at 4:13 AM on November 14, 2006

Best answer: Ah, OK, I see.

Is the script in random.js not encapsulated within a function? Man, that's awful. Anyway, I think you can do what you want without iFrames:

function loadScript(url)
{
var e = document.createElement("script");
e. = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}

Call loadScript() via onClick() on your img tag.
posted by mkultra at 8:44 AM on November 14, 2006