473,695 Members | 2,176 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

AJAX Problem: Loading URL into Div

4 New Member
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:
Expand|Select|Wrap|Line Numbers
  1. function setResponseHtml(pUrl, pDiv) {
  2.     var lHttp = getHTTPObjectHtml();
  3.     var lUrl = pUrl;
  4.     lUrl = lUrl.replace("+","%2b");
  5.     if (isBusy) {
  6.         lHttp.onreadystatechange = function () {}
  7.         lHttp.abort();
  8.     }
  9.  
  10.     lHttp.open("GET", lUrl , true);        
  11.     lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };
  12.  
  13.     if (window.XMLHttpRequest) { // Mozilla check
  14.         if (!isBusy) {
  15.             isBusy = true;            
  16.             lHttp.send(null);
  17.         }
  18.     } else { // IE Check
  19.         isBusy = true;            
  20.         lHttp.send(null);
  21.     }
  22. }
  23.  
  24.  
  25. function getHTTPObjectHtml() {
  26.     http_request = false;
  27.     if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  28.         http_request = new XMLHttpRequest();
  29.         if (http_request.overrideMimeType) {
  30.             http_request.overrideMimeType('text/html');                
  31.         }            
  32.     } else if (window.ActiveXObject) { // IE
  33.         try {
  34.             http_request = new ActiveXObject("Msxml2.XMLHTTP");
  35.         } catch (e) {
  36.             try {
  37.                 http_request = new ActiveXObject("Microsoft.XMLHTTP");
  38.             } catch (e) {}
  39.         }
  40.     }
  41.     return http_request;
  42. }
  43.  
  44. function getHttpResponseText(pDiv, pHttp) {
  45.     var lHttp = pHttp;
  46.  
  47.     if (lHttp == null) // just in case!
  48.         lHttp = gHttp;
  49.  
  50.     if (lHttp.readyState == 4) {
  51.         isBusy = false;
  52.  
  53.         var status = "";
  54.         try {
  55.             status = lHttp.statusText;
  56.             if (lHttp.status == 200) {
  57.                 var htmlDocument = lHttp.responseText;
  58.                 document.getElementById(pDiv).innerHTML = htmlDocument;            
  59.             }
  60.         } catch(e) {
  61.             status = "Trouble accessing it";
  62.             document.getElementById(pDiv).innerHTML = e.message;
  63.         }            
  64.     } else {
  65.         if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
  66.             // only display a loading message if it is defined
  67.             setVisible(pDiv, true);            
  68.             document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();                    
  69.         }
  70.         return;
  71.     }
  72. }
  73.  
  74. var gAjaxLoadingMessage = '<b>Loading...</b>';
  75.  
  76. function setAjaxLoadingMessage(pMessage) {
  77.     gAjaxLoadingMessage = pMessage;
  78. }
  79.  
  80. function getAjaxLoadingMessage() {
  81.     return(gAjaxLoadingMessage);
  82. }
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 getHttpResponse Text function.

This is the section of code where the error occurs:
Expand|Select|Wrap|Line Numbers
  1.     try {
  2.             status = lHttp.statusText;
  3.             if (lHttp.status == 200) {
  4.                 var htmlDocument = lHttp.responseText;
  5.                 if (gAjaxForeground) {
  6.                     setVisible(pDiv, true);
  7.                 }
  8.                 document.getElementById(pDiv).innerHTML = htmlDocument;            
  9.             }
  10.         } catch(e) {
  11.             status = "Trouble accessing it";
  12.             document.getElementById(pDiv).innerHTML = e.message;
  13.         }
I can't figure out exactly why the error is happening, nor how to correct it. If I change the line "document.getEl ementById(pDiv) .innerHTML = htmlDocument;" to "document.getEl ementById(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.
Sep 19 '07 #1
6 10921
epots9
1,351 Recognized Expert Top Contributor
try this:
Expand|Select|Wrap|Line Numbers
  1. try {
  2.             status = lHttp.statusText;
  3.             if (lHttp.status == 200) {
  4.  /*different name*/       var content = lHttp.responseText;
  5.                 if (gAjaxForeground) {
  6.                     setVisible(pDiv, true);
  7.                 }
  8.                 document.getElementById(pDiv).innerHTML = content; //now its content
  9.             }
  10.         } catch(e) {
  11.             status = "Trouble accessing it";
  12.             document.getElementById(pDiv).innerHTML = e.message;
  13.         }
  14.  
  15.  
tell us how it goes.
good luck
Sep 19 '07 #2
Shigun
4 New Member
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?
Sep 20 '07 #3
iam_clint
1,208 Recognized Expert Top Contributor
are both forms necessary? IE should still display it anyways. I have a feeling that this is not your issue.
Sep 20 '07 #4
Shigun
4 New Member
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.
Sep 20 '07 #5
iam_clint
1,208 Recognized Expert Top Contributor
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?)
Sep 20 '07 #6
Shigun
4 New Member
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
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script language=javascript>
  4.             function getHTTPObjectHtml() {
  5.         http_request = false;
  6.         if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  7.             http_request = new XMLHttpRequest();
  8.             if (http_request.overrideMimeType) {
  9.                    http_request.overrideMimeType('text/html');                
  10.             }            
  11.         } else if (window.ActiveXObject) { // IE
  12.             try {
  13.                 http_request = new ActiveXObject("Msxml2.XMLHTTP");
  14.             } catch (e) {
  15.                 try {
  16.                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
  17.                 } catch (e) {}
  18.             }
  19.         }
  20.         return http_request;
  21.     }
  22.  
  23.     var isBusy = false;
  24.     var gHttp = getHTTPObjectHtml();
  25.  
  26.     function setResponseHtml(pUrl, pDiv) {
  27.         var lHttp = getHTTPObjectHtml();
  28.         var lUrl = pUrl;
  29.         lUrl = lUrl.replace("+","%2b");
  30.         if (isBusy) {
  31.             lHttp.onreadystatechange = function () {}
  32.             lHttp.abort();
  33.         }
  34.  
  35.         lHttp.open("GET", lUrl , true);        
  36.         lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };
  37.  
  38.         if (window.XMLHttpRequest) { // Mozilla check
  39.             if (!isBusy) { // getting Javascript errors (only in Mozilla) this check prevents error
  40.                 isBusy = true;            
  41.                 lHttp.send(null);
  42.             }
  43.         } else { // just proceed IE does not have issue!
  44.             isBusy = true;            
  45.             lHttp.send(null);
  46.         }
  47.     }
  48.  
  49.     function getHttpResponseText(pDiv, pHttp) {
  50.         var lHttp = pHttp;
  51.  
  52.         if (lHttp == null) // just in case!
  53.             lHttp = gHttp;
  54.  
  55.         if (lHttp.readyState == 4) {
  56.             isBusy = false;
  57.  
  58.             var status = "";
  59.             try {
  60.                 status = lHttp.statusText;
  61.                 if (lHttp.status == 200) {
  62.                     var content = lHttp.responseText;
  63.                     document.getElementById(pDiv).innerHTML = content;            
  64.                 }
  65.             } catch(e) {
  66.                 status = "Trouble accessing it";
  67.                 document.getElementById(pDiv).innerHTML = e.message;
  68.             }            
  69.         } else {
  70.             if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
  71.                 // only display a loading message if it is defined
  72.                 document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();                    
  73.             }
  74.             return;
  75.         }
  76.     }
  77.  
  78.  
  79.     var gAjaxLoadingMessage = '<b>Updating Database...</b>';
  80.  
  81.     function setAjaxLoadingMessage(pMessage) {
  82.         gAjaxLoadingMessage = pMessage;
  83.     }
  84.  
  85.     function getAjaxLoadingMessage() {
  86.         return(gAjaxLoadingMessage);
  87.     }
  88.  
  89.     function loadIt() {
  90.         setResponseHtml('TestAjax2.htm','showme');
  91.     }
  92.  
  93.         </script>
  94.  
  95.     </head>
  96.  
  97.     <body>
  98.          <form>
  99.         <div id=showme class=details>
  100.         </div>
  101.         <div style='text-align: center;'>
  102.             <a href='javascript: void(0);' onClick='loadIt();'>Load It</a>
  103.         </div>
  104.         </form>
  105.     </body>
  106. </html>
TestAjax2.htm
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <form>Hello World!</form>
  3. </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.
Sep 20 '07 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

2
2053
by: christopher.secord | last post by:
I would like have a little "loading..." tab not unlike the one that gmail uses and I would like to display that tab while an ajax call is made. The javascript to display the tab works. The javascript to hide the tab works. But when I put the two together inside the function that calls the ajax service, they don't work. What seems to happen is that calls to change DOM object properties are queued up, and then all executed...
9
15075
by: Eric Wallstedt | last post by:
I have a page that "logs" changes made to input fields using ajax to pass data to a cgi. I use POST and it works fine most of the time (all the time in IE). But it fails when I get the data from a popup that invokes a function that in turn invokes ajax. Scenerio 1. user clicks a button to create a popup 2. the user selects a select member and clicks a button and a
13
3995
by: Marvin Zhang | last post by:
Hi, I'm not familiar with web programming, but I have a problem here. I have a page. When a user click one button on it, I will use AJAX to request a PHP script which will do a bunch of tasks, asynchronously. These tasks might take long time so I want to keep the user informed of the progress. The problem is that only the PHP script knows the progress, how can the web page gets these information from PHP script?
10
7996
by: shankwheat | last post by:
I'm experimenting with using a AJAX style "processing" icon. The process I'm running in the background with xmlHttp is intensive and takes a 5--10 secs to complete. Instead of my processing icon appearing in the page, the page just freezes during the process until it's finished. Is this the best way to display this kind of icon? What can I do so this works right? Thanks function stateChanged() { if (xmlHttp.readyState == 0)
17
11872
by: Arjen | last post by:
Hi, I want to reload 2 divs at one click. Ive tried: <a href = "javascript:void(0);" onclick="show('ajaxrequest.php?action=removefield','div1');show('ajaxrequest.php?action=reloaddiv2','div2')">verwijderen</a> While both seperate actions work they dont when I put them together. Anyone know how to fix this ? My ajax.js with funcition show
2
1747
by: willl69 | last post by:
Hi All, Ive been having a problem of late with one of my sites that uses PHP5 / Ajax. The problem is that periodically the ajax functions lock up and it gets stuck in the loading phase of the request. If i restart the apache server everything goes back to normal (i assume it severs the connection to the ajax called function). I think this is a problem with the javascript part as i have tried it using a straight post request and have have...
3
2472
by: willl69 | last post by:
Hi All, Ive been having a problem of late with one of my sites that uses PHP5 / Ajax. The problem is that periodically the ajax functions lock up and it gets stuck in the loading phase of the request. If i restart the apache server everything goes back to normal (i assume it severs the connection to the ajax called function). I think this is a problem with the javascript part as i have tried it using a straight post request and have...
7
10267
xNephilimx
by: xNephilimx | last post by:
lHi guys! I'm having a little problem that's getting on my nerves, I couldn't find a solution, I also tryed googling it and I found nothing... (my field of expertise is in AS 2 and 3, but I still lack some JavaScript solid knowdlege) The problem is that when I try to send a form's content with Ajax (I'm using the prototype library), for some reason the latin characters (accents and stuff, like áéíóú) turn a mess when I try to store them in...
11
3032
by: =?Utf-8?B?R2VyaGFyZA==?= | last post by:
I have run into a situation that if a page/tab that uses the Ajax toolkit (using .net version 3.5) is closed before the Ajax enable controls complete loading, then IE locks up. Does it in both IE7 and IE8. There is no issue when the controls are allowed to complete loading. Can you please tell me the best practice that handles this? Thanks.
0
8578
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9120
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8998
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8857
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8831
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7668
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4346
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4586
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3013
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.