Computing.Net > Forums > Web Development > AJAX Problem: Loading Page into Div

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

AJAX Problem: Loading Page into Div

Reply to Message Icon

Name: Shigun
Date: September 19, 2007 at 10:50:46 Pacific
OS: Windows XP SP2
CPU/Ram: X
Product: X
Comment:

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 = 'Loading...';

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.



Sponsored Link
Ads by Google

Response Number 1
Name: Laler
Date: September 20, 2007 at 06:22:36 Pacific
Reply:

Sorry for this not-so-straight answer. I'm not familiar with JavaScript, especially on their different implementation on different browsers.

I've encountered the same problem a couple times. My (for tests) browsers is not just IE and Firefox, but also Opera (9+) and now (since a project back) also Safari for Windows.

I think all problems related to Ajax implementation on different browsers can be solved by using Sarissa. Here I think is a good sample (view the source), and the article:

http://www.yourhtmlsource.com/examp...
http://www.yourhtmlsource.com/javas...

The sample is about form submission, but I get a lot of enlightment from it.

Other than using Sarissa, you also have to:

- create the JavaScripts in strict-DOM-mode (or something like that)

- not using innerHTML

- use XML (not obj.responseText).

Those, solved all of my Ajax problems, especially when one doesnt work on IE and IE only says "object expected" without further details.

The above method is not possible for fetching "a full HTML page" I know, but maybe in that case it's best to not use Ajax?

Why do we use Ajax? To remove the visitor's frustration when they need to load pages while there's only a small amount of data being transfered.

Not just for tests or proof or concept IMO :-)

Sample of a good use of Ajax IMO: In sites like Digg, where some comments are hidden, and shown when visitor clicks.

The visitors'll know that they can't press the "back" button (which sometimes become a problem on Ajax sites), bandwidth saved (not all comments shown on every pageload), and visitors don't have to wait long when they want to see a particular comment.


---
JakartaSpot.com


0
Reply to Message Icon

Related Posts

See More


HTML Password and user na... image problem



Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: AJAX Problem: Loading Page into Div

Loading new pages into table w/PHP www.computing.net/answers/webdevel/loading-new-pages-into-table-wphp/1473.html

Javascript Question www.computing.net/answers/webdevel/javascript-question/1564.html

Dreamweaver pages loading slow.... www.computing.net/answers/webdevel/dreamweaver-pages-loading-slow/766.html