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 set 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.
Just a quick question... why aren't you using IFRAME (or whatnot) for something like this. If you're loading an entire page, you're going to have issues like duplicate HTML and BODY tags.
-Damien
The main reason behind using a DIV is because the content from the page being loaded into the div is dynamic content, and the DIV will resize automatically if needed. One other thing to note is that this DIV tag isn't always visible on the page. When the user mouses over an item on the page a pop-up comes up displaying additional information about the object, as well as allowing the user to edit such information, which is where the AJAX comes in - allowing the user to edit the information without straying away from this page, and the page being loaded into the pop-up is the page that has done the update and is displaying the results. I haven't worked with IFRAMEs that much, but from my understanding all of this is not that possible with them - correct me if I'm wrong. I have thought about about duplicated tags, but in the past and during my testing I've never experienced any problems by having such.
Well, you can't push an HTML string into an IFRAME, but you can load a URL. Think of an IFRAME like your DIV; it's a container. You can perform client-side logic with it (e.g. show/hide) and it's the way to host another page inside a page (like you are doing).
Seehttp://en.wikipedia.org/wiki/IFrame andhttp://msdn2.microsoft.com/en-us/library/ms537627.aspx.
Using the DIV and having duplicate HTML and BODY (not to mention HEAD, etc) will cause issues; plus it's not well formed at all.
Hope this helps you.
-Damien
With a bit of help from someone and a bit more searching online I discovered the cause of my problem. Thought I'd post the actual reason for the problem and my resolution here for anyone that might be having similar issues.
The reason for the Runtime Error were Element Prohibitions within the HTML. The DIV that I was trying to insert into was surrounded by FORM tags and the page I was trying to insert into the DIV had FORM tags within it. To put it simply: You cannot have a FORM inside of a FORM.
See this URL for more information: http://www.w3.org/TR/xhtml1/#prohibitions
IE upholds this, where as Firefox doesn't care and just renders it on screen how it thinks the output should look which is why I was having this problem only in IE.
I couldn't remove the FORM tags because the website I am working on is a SharePoint site that uses Web Parts (which are required to have FORM tags around them - if I removed them I got errors that bluntly said FORM tags were needed). So, to overcome this I modified the function getHttpResponseText() (See my first post to view the code). Rather than dump the repsonseText straight into the innerHTML of the DIV tag I used indexOf to find the start and end of the data that I specifically wanted (in my specific case one table on the page) and used a substring to cut that out from the responseText and dump that into the innerHTML of the DIV, thus eliminating the FORM tags.
No iFrames involved and everything works splendid. :p
On a side not, I went to set my thread to 'Resolved' and it was already set at that. I definitely never did that since I didn't have a resolution until today. If code in the forum did that, I would correct it ASAP. If a person did that, I would smack him/her for not reading the thread properly. Suggesting to use an iFrame as an alternative was never a solution. It was just what I said - an alternative where the original problem still remained. The reason for the error, nor a solution to fix it never existed in this thread until the post I am making now.
piyushp: