469,314 Members | 2,151 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > populate div with website using url

Post your question to a community of 469,314 developers. It's quick & easy.

Populate div with website using URL

Im new to the whole javascript game, I know pretty much just enough to be dangerous with no real substance. Anyway Im trying to populate a DIV with a website using the URL as an inner html source


Here is my code I keep getting an error object expecte don line 58. Which I will highlight. Anyway Not only would i Like to know what that error is about but also if my logic is correct or if I can even do what im trying... and if not what other solutions are there besides iframes.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script langauge="text/javascript">
  5.  
  6.  
  7. function reportsnagger(str)
  8. { 
  9. xmlHttp=GetXmlHttpObject();
  10. if (xmlHttp==null)
  11.   {
  12.   alert ("Your browser does not support AJAX!");
  13.   return;
  14.   } 
  15. var url="";
  16. url=url++str;
  17. xmlHttp.onreadystatechange=stateChanged;
  18. }
  19.  
  20. function stateChanged(showcustomer.url) 
  21. { 
  22. if (xmlHttp.readyState==4)
  23. { 
  24. document.getElementById(reportspace).innerhtml=url
  25.  
  26.  
  27. }
  28.  
  29. function GetXmlHttpObject()
  30. {
  31. var xmlHttp=null;
  32. try
  33.   {
  34.   // Firefox, Opera 8.0+, Safari
  35.   xmlHttp=new XMLHttpRequest();
  36.   }
  37. catch (e)
  38.   {
  39.   // Internet Explorer
  40.   try
  41.     {
  42.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  43.     }
  44.   catch (e)
  45.     {
  46.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  47.     }
  48.   }
  49. return xmlHttp;
  50. }
  51.  
  52. </script>
  53.  
  54. </head>
  55. <body>
  56. <form> 
  57. Select A Report:
  58. <select name="customers" onChange="reportsnagger(this.value)"> //this is line 58
  59. <option value="">Select an option please
  60. <option value="URL EDITED">choice1
  61. <option value="NORTS ">choice2
  62. <option value="WOLZA">choice3
  63. </select>
  64. </form><p>
  65. <div id="reportspace"><b>Report info will be listed here.</b></div>
  66. </p></body>
  67. </html>
Jul 17 '08 #1
6 4344
acoder
16,027 Expert Mod 8TB
First of all, welcome to Bytes!

There's a number of mistakes you've made. I would suggest you look at the source of a working example, or a simple Ajax tutorial to get you started. Check out the links in this thread.

Just a question though: is the URL from a different domain, i.e. not your site?

PS. changed the title to give the thread a better description.
Jul 17 '08 #2
aside from my mistakes if the site is on my web server i should be able to use as URL as innerhtml?

I have the basics down I believe, I understand there were some mistakes in my code could you be a dear and point them out? I know Im asking a lot especially for a new user but none of the references I've turned to have been much help asking specific question to a real life person would help me out tremendously.

If I can't use the object.innerhtml function then what should I use instead? I have the concept of what I want to do down, and have a basic understanding of how the script will be set up to handle it as you can see... I just don't have the practical part. All the tutorials I've read and the O'Reilly book I purchased cover some very usefull things but never specifically cover this issue as far as i can see.

While were on the subject will i need to call all the child and parent (nodes?) to make the site I pull in work correctly or will just simply referencing the URL allow it to function. Im sorry for being so needy but I really am at my wits end and none of the google grease i've been using has been helping.

BTW thanks for the welcome and Im glad your willing to help.
Jul 18 '08 #3
acoder
16,027 Expert Mod 8TB
If the website is from a different domain, i.e. not from your own site, you cannot access it unless you use some server-side code.

As for the mistakes, see these quick changes:
Expand|Select|Wrap|Line Numbers
  1. url = // a valid url
  2. url=url+str;
  3. xmlHttp.onreadystatechange=stateChanged;
  4. }
  5.  
  6. function stateChanged() 
  7. { 
  8.     if (xmlHttp.readyState==4)
  9.     { 
  10.         if(xmlHttp.status == 200) 
  11.         {
  12.             document.getElementById("reportspace").innerHTML=xmlHttp.responseText;
  13.         }
  14.  
  15.     }
  16. }
  17.  
Jul 19 '08 #4
The site I am trying to access is on my domain. I just wondered if I can use the document.innerhtml function or do i need another function to pull the page? Because it's technically html but i don't know if it will pull in the code or the precompiled page.

Also thanks for the code help, it's easy to over look those kind of errors in your own stuff.
Jul 22 '08 #5
i've rewritten my javascript but i need some help... the reference I used gave generic examples and Im not sure how to apply them to my specific situation like what variables to use... I hate coming here and essentially asking you to do this for me but I really am helpless...

heres the new code..

Expand|Select|Wrap|Line Numbers
  1. var request = false;
  2. var response;
  3. var currentObj;
  4.  
  5. function clearData(reportspace){
  6.     document.getElementById(reportspace).innerHTML = '';
  7. }
  8.  
  9. function loading(reportspace){
  10.     document.getElementById(reportspace).innerHTML = "Loading...";
  11. }
  12.  
  13. function ajaxRequest(url, data, reportspace){
  14.     currentObj = obj;
  15.     loading(currentObj);
  16.     if (window.XMLHttpRequest){
  17.         try{
  18.             request = new XMLHttpRequest();
  19.         }catch(e){
  20.             request = false;
  21.         }
  22.     }else if (window.activeXObject){
  23.         try{
  24.             request = new ActiveXObject("Msxml2.XMLHTTP");
  25.         }catch(e){
  26.             try{
  27.                 request = new ActiveXObject("Microsoft.XMLHTTP");
  28.             }catch(e){
  29.                 request = false;
  30.             }
  31.         }
  32.     }
  33.     request.onreadystatechange = handleData;
  34.     request.open("POST", url, true);
  35.     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  36.     request.send(data);
  37.  
  38. }
  39.  
  40. function handleData(){
  41.     if (request.readyState == 4){
  42.         if (request.status == 200){
  43.             populateData(request);
  44.         }
  45.     }
  46. }
  47. function populateData(request){
  48.     data = request.responseText;
  49.     if (data != null){
  50.         clearData(currentObj);
  51.         document.getElementById(currentObj).innerHTML = data;
  52.     }else{
  53.         document.getElementById(currentObj).innerHTML = '';
  54.     }
  55. }
  56.  
the html page is the same except im now pulling the javascript in from a .js instead of imbedding it. Im still getting the object expected error on line 10 of the html any help would be appreciated
Jul 24 '08 #6
acoder
16,027 Expert Mod 8TB
You've not defined obj (line 14 in previous post) anywhere.
Jul 29 '08 #7

Post your reply

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

Similar topics
Populate Dynamic dropdown box
7 posts views Thread by Simon Gare | last post: by
What is DAPP？
reply views Thread by zhoujie | last post: by
Load data into grid
reply views Thread by harlem98 | last post: by
Load data into grid
reply views Thread by harlem98 | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.