473,320 Members | 1,848 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

AJAX Problem: Loading URL into Div

4
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 getHttpResponseText 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.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.
Sep 19 '07 #1
6 10896
epots9
1,351 Expert 1GB
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
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 Expert 1GB
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
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 Expert 1GB
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
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
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...
9
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...
13
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,...
10
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...
17
by: Arjen | last post by:
Hi, I want to reload 2 divs at one click. Ive tried: <a href = "javascript:void(0);"...
2
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...
3
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...
7
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...
11
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.