replace DIV innerHTML with file contents (javascript IE bug?)

I have a simple AJAX-like implementation of a javascript whose purpose is to compose pages dynamically on an intranet filesystem.

It basically allows you to navigate through some text files on the network filesystem in a heirachical manner, and this is done using a javascript.  I suppose it's AJAX, but who's to say..?

Anyway, this works really well in Mozilla, and really well in Chrome.  It doesn't work at all in IE.  I think the reason it doesn't work very well is because the javascript I'm using is a little out of date.  I got it online originally.  It was the only one I found that works whatsoever, but it has an IE bug, apparently.

I've attached the javascript below.  I have reformatted it slightly because the original author has no sense of asthetics.  As you can see it comes from "Dynamic Drive" -- so I didn't write it and I'm not so awesome with javascript to debug it myself.

I'd like some help getting this javascript working.

To see my prototype working, just decompress the RAR archive (I've renamed it to .JS so I could attach it) to your drive and browse to the index.html file.  It does work in browsers other than IE.  When I use IE, and I follow one of the links, instead of having the DIV.innerHTML replaced by the contents of such-and-such file, Internet Explorer opts to open up a Windows Explorer at that location.

Why do I get a new Explorer window when I click on the hyperlink?  What needs to be fixed in this javascript to prevent that from happening, and instead to READ the file and place its contents into the innerHTML of the DIV?

Any help is most appreciated!

IE 7.0.5730.13

Chrome beta (42199)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20100202 Firefox/3.5.8 (.NET CLR 3.5.30729)

Brian Herbert Withun

//* Dynamic Ajax Content- © Dynamic Drive DHTML code library (
//* This notice MUST stay intact for legal use
//* Visit Dynamic Drive at for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""


function FillDiv(url, containerid)
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject)
    { // if IE
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        catch (e)
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            catch (e){}
        return false
    page_request.onreadystatechange=function() { loadpage(page_request, containerid) }
    if (bustcachevar) //if bust caching of external page
        bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
   'GET', url+bustcacheparameter, true)


function loadpage(page_request, containerid)
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))


function loadobjs()
    if (!document.getElementById)
    for (i=0; i<arguments.length; i++)
        var file=arguments[i]
        var fileref=""
        if (loadedobjects.indexOf(file)==-1)
        { //Check to see if this object has not already been added to page before proceeding
            if (file.indexOf(".js")!=-1)
            { //If object is a js file
                fileref.setAttribute("src", file);
            else if (file.indexOf(".css")!=-1)
            { //If object is a css file
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file);
        if (fileref!="")
        loadedobjects+=file+" " //Remember this object as being already added to page


Open in new window

LVL 13
Brian WithunAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I request you to use the JQuery library, I just found it out a few days ago, and it really is awesome.
It has a great AJAX support and also a lot of visual benefits.

You can get it here:
Or direct download:
And the reference to the ajax function is here (easy):

Hope this helps you.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
the problem is that the server is sending some "generic" content-type header for the files you are trying to load. Most likely application/octet-stream. Refer to:

The script should work if you were to rename those files and give them a "recognized" extension - ex:

and then update your links:
<a href="" onclick="FillDiv('Products.html','Child'); return false;">Products</a>
<a href="" onclick="FillDiv('Versions.html','Child'); return false;">Versions</a>

Brian WithunAuthor Commented:
This works great.  I downloaded jquery-1.4.2.min.js and I use the method you suggested.  It works in every browser I've tried.  Thank you.
Brian Withun.
It's good to see another problem solved :).
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.