Populate div with website using URL

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tinman486
    New Member
    • Jul 2008
    • 4

    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.

    Code:
    <html>
    <head>
    
    <script langauge="text/javascript">
    
    
    function reportsnagger(str)
    { 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
      {
      alert ("Your browser does not support AJAX!");
      return;
      } 
    var url="";
    url=url++str;
    xmlHttp.onreadystatechange=stateChanged;
    }
    
    function stateChanged(showcustomer.url) 
    { 
    if (xmlHttp.readyState==4)
    { 
    document.getElementById(reportspace).innerhtml=url
    
    
    }
    
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
      {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
    catch (e)
      {
      // Internet Explorer
      try
        {
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
      catch (e)
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    return xmlHttp;
    }
    
    </script>
    
    </head>
    <body>
    <form> 
    Select A Report:
    [B]<select name="customers" onChange="reportsnagger(this.value)">[/B] //this is line 58
    <option value="">Select an option please
    <option value="URL EDITED">choice1
    <option value="NORTS ">choice2
    <option value="WOLZA">choice3
    </select>
    </form><p>
    <div id="reportspace"><b>Report info will be listed here.</b></div>
    </p></body>
    </html>
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    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.

    Comment

    • tinman486
      New Member
      • Jul 2008
      • 4

      #3
      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.innerhtm l 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.

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        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:
        [code=javascript]url = // a valid url
        url=url+str;
        xmlHttp.onready statechange=sta teChanged;
        }

        function stateChanged()
        {
        if (xmlHttp.readyS tate==4)
        {
        if(xmlHttp.stat us == 200)
        {
        document.getEle mentById("repor tspace").innerH TML=xmlHttp.res ponseText;
        }

        }
        }
        [/code]

        Comment

        • tinman486
          New Member
          • Jul 2008
          • 4

          #5
          The site I am trying to access is on my domain. I just wondered if I can use the document.innerh tml 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.

          Comment

          • tinman486
            New Member
            • Jul 2008
            • 4

            #6
            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..

            Code:
            var request = false;
            var response;
            var currentObj;
            
            function clearData(reportspace){
            	document.getElementById(reportspace).innerHTML = '';
            }
            
            function loading(reportspace){
            	document.getElementById(reportspace).innerHTML = "Loading...";
            }
            
            function ajaxRequest(url, data, reportspace){
            	currentObj = obj;
            	loading(currentObj);
            	if (window.XMLHttpRequest){
            		try{
            			request = new XMLHttpRequest();
            		}catch(e){
            			request = false;
            		}
            	}else if (window.activeXObject){
            		try{
            			request = new ActiveXObject("Msxml2.XMLHTTP");
            		}catch(e){
            			try{
            				request = new ActiveXObject("Microsoft.XMLHTTP");
            			}catch(e){
            				request = false;
            			}
            		}
            	}
            	request.onreadystatechange = handleData;
            	request.open("POST", url, true);
            	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            	request.send(data);
            
            }
            
            function handleData(){
            	if (request.readyState == 4){
            		if (request.status == 200){
            			populateData(request);
            		}
            	}
            }
            function populateData(request){
            	data = request.responseText;
            	if (data != null){
            		clearData(currentObj);
            		document.getElementById(currentObj).innerHTML = data;
            	}else{
            		document.getElementById(currentObj).innerHTML = '';
            	}
            }
            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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              You've not defined obj (line 14 in previous post) anywhere.

              Comment

              Working...