DIV tag replaces entire page when refreshed

[MDiddy]

I need to refresh a div which contains an ad while the rest of the page stays the same. I think I'm pretty close by reading the previous posts on this site, but one odd thing is tripping me up and I can't figure out why. When I call my function to refresh the div, it replaces everything on the page instead of just swapping out the div. I'd appreciate any help from you js experts!

<script type="text/javascript">
function adBump(rand){
//setup ad call. returns a document.write() command from ad server
var adcall = "http://oas.#*$!x.com/RealMedia/ads/adstream_jx.ads/www.#*$!x.com/#*$!x/"+rand+"other_paramters";

//adds the advertisement graphic above the ad when it loads.
document.getElementById("adLabel").innerHTML = "<img src='http://images.#*$!x.com/images/#*$!xx/adv_180x9.gif' width='180' height='9' alt='Advertisement'>";

//selects ad div, empties it then appends the new js call.
var b = document.getElementById("ad");
b.innerHTML = "";
var js = document.createElement("script");
js.type = "text/javascript";
js.src = adcall;
b.appendChild(js);

}
</script>

<div id="adArea">
<div id="adLabel">Ad label goes here</div>
<div id="ad">Ad goes here</div>
</div>

[r51]

If you use document.write() in a page that has already loaded, it will start a new document - i.e. it will wipe the existing page.

[gRoberts]

Hmm.. I think this is down to the js file your downloading is using the onload event to document.write content. Could it be possible that you should be using an iFrame instead? Also, the ad provider should be able to give you some examples on how to display the add.

[MDiddy]

Here's a sample of the code returned from the ad server:

document.write ('<A HREF="http://oas.xxxxxxx.com/RealMedia/ads/click_lx.ads/www.xxxxxx.com/xxxxxxx/2239020920/1873386188/x03/xxxxx/xxxx_house_ad/house_180x150.gif/34363839653434343436353231393530?" target="_blank"><IMG SRC="http://xxxxxx.akamai.net/7/800/1129/1185382407/oas.realmedia.com/RealMedia/ads/Creatives/xxxx/xxxx_house_ads/house_180x150.gif"  ALT=""  BORDER="0"></A>');

The ad server company isn't terribly helpful with this. It seems like such a minor thing and it's driving me crazy.

[r51]

When you append the script tag to the document, the code in it will run straight away. Code including document.write is okay while the page is loading, it will just be parsed, but if the page has already loaded then the existing content will be wiped. In your case, where the page has loaded and you're trying to swap the content of a div, using document.write will wipe the page and start again.
Maybe use XMLHTTPRequest (i.e. AJAX) to get the adserver code as a string, pull out the content of the document.write, and swap that into the div.

[MDiddy]

I don't have nay real experience with AJAX. Can you provide any links or line or so of code to get me started?


I've been poking around with XHR, and for some reason my event handler is not being fire when I define the path to the ad server. When I change the path to a local file, it works just fine. Any suggestions would be appreciated.

Thanks again

[r51]

Sorry, should have thought, XHR falls under the same source policy. You wont be able to use it to get at the adserver code directly because the adserver is a different domain to your web page.
You would need to use XHR to access a script on your own server and the script could return the adserver code for you. Starting to get more complicated.
Someone mentioned iFrames. I've never used them but they might be a simpler solution.