Link to home
Start Free TrialLog in
Avatar of Brian Withun
Brian WithunFlag for United States of America

asked on

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 4.1.249.1042 beta (42199)

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


--
Brian Herbert Withun

//***********************************************
//* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit Dynamic Drive at http://www.dynamicdrive.com/ 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
        try
        {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e)
        {
            try
            {
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
        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()
        
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
}

//***********************************************

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

//***********************************************

function loadobjs()
{
    if (!document.getElementById)
    return
    
    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=document.createElement('script')
                fileref.setAttribute("type","text/javascript");
                fileref.setAttribute("src", file);
            }
            else if (file.indexOf(".css")!=-1)
            { //If object is a css file
                fileref=document.createElement("link")
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file);
            }
        }
        if (fileref!="")
        {
        document.getElementsByTagName("head").item(0).appendChild(fileref)
        loadedobjects+=file+" " //Remember this object as being already added to page
        }
    }
}

//***********************************************

Open in new window

DevStat.js
ASKER CERTIFIED SOLUTION
Avatar of Aidiakapi
Aidiakapi

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of hielo
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:
http://kb.iu.edu/data/agtj.html

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

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>

Avatar of Brian Withun

ASKER

This works great.  I downloaded jquery-1.4.2.min.js and I use the http://api.jquery.com/load/ method you suggested.  It works in every browser I've tried.  Thank you.
Brian Withun.
Avatar of Aidiakapi
Aidiakapi

It's good to see another problem solved :).