AJAX Problem: Loading URL into Div

[Shigun]

On a website I am working on I am trying to load another page into a div on the the page the user does his work from. What I have works correctly in FireFox, but not in IE. I've rummaged Google for quite a bit and found similar problems, but no actual solutions.

Here is the JavaScript I have to load a URL into a Div:

function setResponseHtml(pUrl, pDiv) {
    var lHttp = getHTTPObjectHtml();
    var lUrl = pUrl;
    lUrl = lUrl.replace("+","%2b");
    if (isBusy) {
        lHttp.onreadystatechange = function () {}
        lHttp.abort();
    }
 
    lHttp.open("GET", lUrl , true);        
    lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };
 
    if (window.XMLHttpRequest) { // Mozilla check
        if (!isBusy) {
            isBusy = true;            
            lHttp.send(null);
        }
    } else { // IE Check
        isBusy = true;            
        lHttp.send(null);
    }
}
 
 
function getHTTPObjectHtml() {
    http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');                
        }            
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    return http_request;
}
 
function getHttpResponseText(pDiv, pHttp) {
    var lHttp = pHttp;
 
    if (lHttp == null) // just in case!
        lHttp = gHttp;
 
    if (lHttp.readyState == 4) {
        isBusy = false;
 
        var status = "";
        try {
            status = lHttp.statusText;
            if (lHttp.status == 200) {
                var htmlDocument = lHttp.responseText;
                document.getElementById(pDiv).innerHTML = htmlDocument;            
            }
        } catch(e) {
            status = "Trouble accessing it";
            document.getElementById(pDiv).innerHTML = e.message;
        }            
    } else {
        if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
            // only display a loading message if it is defined
            setVisible(pDiv, true);            
            document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();                    
        }
        return;
    }
}
 
var gAjaxLoadingMessage = '<b>Loading...</b>';
 
function setAjaxLoadingMessage(pMessage) {
    gAjaxLoadingMessage = pMessage;
}
 
function getAjaxLoadingMessage() {
    return(gAjaxLoadingMessage);
}

This is called from the HTML via: setResponseHtml(urlString, divString);
urlString is a string containing the URL that I wish to load in the div, and divString a string containing the id of the div I wish to load the URL into.

I've tested my code on IE before and it worked properly with a very small file with nothing in except for a couple words. I think the problem may go back to these pages, both the one the users calls the function from and the page to be loaded, contain SharePoint Web Parts. That is the only difference I can think of between the original pages I used to test the code and the pages I am working with now.

An error occurs in IE when trying to load the Div, the error being "[object Error]" and the error message being "Unknown runtime error" if I print e and e.message respectively from the getHttpResponseText function.

This is the section of code where the error occurs:

    try {
            status = lHttp.statusText;
            if (lHttp.status == 200) {
                var htmlDocument = lHttp.responseText;
                if (gAjaxForeground) {
                    setVisible(pDiv, true);
                }
                document.getElementById(pDiv).innerHTML = htmlDocument;            
            }
        } catch(e) {
            status = "Trouble accessing it";
            document.getElementById(pDiv).innerHTML = e.message;
        }

I can't figure out exactly why the error is happening, nor how to correct it. If I change the line "document.getElementById(pDiv).innerHTML = htmlDocument;" to "document.getElementById(pDiv).innerHTML = 'Any text here';" I recieve no errors, so apparently IE doesn't like setting the innerHTML of the page to be loaded to the statusText. Why that is and how to fix it is what I'm hoping to find out.

[epots9]

try this:

try {
            status = lHttp.statusText;
            if (lHttp.status == 200) {
 /*different name*/       var content = lHttp.responseText;
                if (gAjaxForeground) {
                    setVisible(pDiv, true);
                }
                document.getElementById(pDiv).innerHTML = content; //now its content
            }
        } catch(e) {
            status = "Trouble accessing it";
            document.getElementById(pDiv).innerHTML = e.message;
        }
 
 

tell us how it goes.
good luck

[Shigun]

Changing the variable names has no effect on the pages.

Through a bit more searching yesterday I believe I discovered the problem. With using Web Parts when the server throws out the result page to the user's browser it is required to have <form> tags around the Web Parts. Since the div is contained within a Web Part and the page that I am trying to load into the Div contains another Web Part I am inadvertently putting a form inside of another form, which if I recall correctly is against HTML specification. IE catches this, which is what generates the Unknown Runtime Error, where as FireFox says what the hell and displays it anyway. After a bit of testing, I'm pretty sure that is why my pages are not working properly. Is there anyway to get around this in IE and have it display anyways?

[iam_clint]

are both forms necessary? IE should still display it anyways. I have a feeling that this is not your issue.

[Shigun]

From my understanding, the form tags are required to be there or the page will error. This is what I receive when I cut the <form> tags out of the coding:

WebPart and WebPartZone controls must live in a runat='server' HtmlForm.

The way I have my page setup it simply cannot be done from everything I look at, so currently I am looking at a way to rearrange the coding to get the DIVs outside of the Web Part (thus outside of the <form> tags). I'm pretty sure I can accomplish this, but I'm not liking having to rewrite what I have since everything works (with the exception of loading the URL into the DIVs). The only alternative I can think of is find some way to have a Data View Web Part that doesn't require being within a form, which I don't think is possible due to the first lines of this reply.

[iam_clint]

From my understanding, the form tags are required to be there or the page will error. This is what I receive when I cut the <form> tags out of the coding:



The way I have my page setup it simply cannot be done from everything I look at, so currently I am looking at a way to rearrange the coding to get the DIVs outside of the Web Part (thus outside of the <form> tags). I'm pretty sure I can accomplish this, but I'm not liking having to rewrite what I have since everything works (with the exception of loading the URL into the DIVs). The only alternative I can think of is find some way to have a Data View Web Part that doesn't require being within a form, which I don't think is possible due to the first lines of this reply.

I believe i have either gone brain dead or don't understand whats going on here lets take it down to the very basics


ajax query -> hits server
server -> replies to ajax
javascript -> sets the innerHTML of a div (this doesn't require any forms at all)
I have never had any problems settting the innerHTML of a div via an ajax query no matter how large or small the data was

If all else fails you could always use an iframe and use ajax to update the iframe (kinda lame though)

+ I have never heard of webpart (could you fill me in on this?)

[Shigun]

ajax query -> hits server
server -> replies to ajax
javascript -> sets the innerHTML of a div (this doesn't require any forms at all)
I have never had any problems settting the innerHTML of a div via an ajax query no matter how large or small the data was

If all else fails you could always use an iframe and use ajax to update the iframe (kinda lame though)

+ I have never heard of webpart (could you fill me in on this?)

The website I'm working on is an internal website for my company, which is based off of a SharePoint Server, which is where the Web Parts come in. I'm not too familiar with (part of my problem with this), so anyone please correct me if I don't explain this well - but Web Parts are essentially pre-built web services (bits of coding) that you can insert into SharePoint pages. If you do a quick google search you should get a plethora of hits.

I'm trying to add some additional features to these pages per request, and also on my page (to be loaded into Div) I was trying to take advantage of a Web Part (mostly because it's the only way I'm aware of to communicate with a database due to how everything is setup).

The kicker about Web Parts, which I didn't realize until yesterday is that the Server puts <form> tags around them, and as far as I understand, they are required to be there else the page errors.

To produce the Unknown Runtime Error yourself, here are two small files I put together quick to demonstrate, which use the same JavaScript functions that I am using.

TestAjax.htm

<html>
    <head>
        <script language=javascript>
            function getHTTPObjectHtml() {
        http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                   http_request.overrideMimeType('text/html');                
            }            
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        return http_request;
    }
 
    var isBusy = false;
    var gHttp = getHTTPObjectHtml();
 
    function setResponseHtml(pUrl, pDiv) {
        var lHttp = getHTTPObjectHtml();
        var lUrl = pUrl;
        lUrl = lUrl.replace("+","%2b");
        if (isBusy) {
            lHttp.onreadystatechange = function () {}
            lHttp.abort();
        }
 
        lHttp.open("GET", lUrl , true);        
        lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };
 
        if (window.XMLHttpRequest) { // Mozilla check
            if (!isBusy) { // getting Javascript errors (only in Mozilla) this check prevents error
                isBusy = true;            
                lHttp.send(null);
            }
        } else { // just proceed IE does not have issue!
            isBusy = true;            
            lHttp.send(null);
        }
    }
 
    function getHttpResponseText(pDiv, pHttp) {
        var lHttp = pHttp;
 
        if (lHttp == null) // just in case!
            lHttp = gHttp;
 
        if (lHttp.readyState == 4) {
            isBusy = false;
 
            var status = "";
            try {
                status = lHttp.statusText;
                if (lHttp.status == 200) {
                    var content = lHttp.responseText;
                    document.getElementById(pDiv).innerHTML = content;            
                }
            } catch(e) {
                status = "Trouble accessing it";
                document.getElementById(pDiv).innerHTML = e.message;
            }            
        } else {
            if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
                // only display a loading message if it is defined
                document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();                    
            }
            return;
        }
    }
 
 
    var gAjaxLoadingMessage = '<b>Updating Database...</b>';
 
    function setAjaxLoadingMessage(pMessage) {
        gAjaxLoadingMessage = pMessage;
    }
 
    function getAjaxLoadingMessage() {
        return(gAjaxLoadingMessage);
    }
 
    function loadIt() {
        setResponseHtml('TestAjax2.htm','showme');
    }
 
        </script>
 
    </head>
 
    <body>
         <form>
        <div id=showme class=details>
        </div>
        <div style='text-align: center;'>
            <a href='javascript: void(0);' onClick='loadIt();'>Load It</a>
        </div>
        </form>
    </body>
</html>

TestAjax2.htm

<html>
<form>Hello World!</form>
</html>

Now if you load up TestAjax.htm and click on 'Load It' to put the contents of TestAjax2.htm into the Div the error should be produced. Now remove the <form> tags from either one of the files and it should work just fine.

Simple solution to my problem... remove the <form> tags. But, I can't do that as they are required for the SharePoint Web Parts.

Hope that made everything clear for ya.