• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1319
  • Last Modified:

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
0
Brian Withun
Asked:
Brian Withun
  • 2
1 Solution
 
AidiakapiCommented:
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: http://jquery.com/
Or direct download: http://code.jquery.com/jquery-1.4.2.min.js
And the reference to the ajax function is here (easy): http://api.jquery.com/load/
(advanced): http://api.jquery.com/jQuery.ajax/

Hope this helps you.
0
 
hieloCommented:
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>

0
 
Brian WithunAuthor Commented:
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.
0
 
AidiakapiCommented:
It's good to see another problem solved :).
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now