www.webdeveloper.com
Results 1 to 8 of 8

Thread: get content from div in another page

  1. #1
    Join Date
    Dec 2010
    Posts
    130

    get content from div in another page

    Hi all,

    Can someone help me getting the content from a div in another page?

    i need to get the content of div1 in www.xpto.com to div2 in page www.otpx.com

    thanks

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    881
    There are a couple of ways you could go about this; I'm going to cover an AJAX/PHP method to dynamically get the desired content and place it on your page.

    Essentially there are 2 parts to this, the first is a simple AJAX function on your main page that will tell a PHP script to get some data for you from another site/page. The second part is the PHP script which will fetch the contents of another page and send it back to your AJAX function.
    Code:
    <script type="text/javascript">
    function setReqObj() {
      var nAjax;
      if(window.XMLHttpRequest) {
        nAjax = new XMLHttpRequest();
      } else {
        nAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return nAjax;
    }
    
    function _LoadExtData($url, $id, $div) {
      var xmlhttp = setReqObj();
    
      if(xmlhttp) {
        xmlhttp.onreadystatechange=function() {
          if(xmlhttp.readyState == 4) {
            var $content = xmlhttp.responseText;
            document.getElementById($div).innerHTML = $content;
          }
        }
    
        $data = "url=" + $url + "&id=" $id;
    
        xmlhttp.open("POST", "location/toPHP/script.php", true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send($data);
      }
    }
    </script>
    PHP Code:
    <?php
    $url 
    = (isset($_POST['url'])) ? $_POST['url'] : "";
    $id = (isset($_POST['id'])) ? $_POST['id'] : "";

    $dom = new DOMDocument();
    $dom->loadHTMLfile($url);
    //$dom->validate();
    $dom->validateOnParse true;
    $dom->loadHTML($html);
    $dom->preserveWhiteSpace false;
    $specs $dom->getElementById($id);
    $returnHTML $specs->nodeValue;

    if(
    $returnHTML) {
      echo 
    $returnHTML;
    } else {
      exit(
    "Failed to fetch data!");
    }
    ?>
    Essentially, the way this is set up to work is that you will have a .php file saved on your server (make sure to set the "location/toPHP/script.php" to the proper location of this .php file) and then you will also add the javascript code to any page you want to use this on. Whenever you'd like (on the click of a button, on the page load, etc) you can call the _LoadExtData() function in which you need to specificy 3 things: the page url to grab data from (www.otpx.com), the ID of the element you want to grab content from (div2) and the element you want to put this data in (div1).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Dec 2010
    Posts
    130
    i program in asp not php :s

    i heard of a method with .clone() of jQuery.

    any ideas?

    thanks

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    881
    Let's start with the clone() method in jQuery. While it does seem to have a similar concept to what you need (making a duplicate of any elements in a selector), it would only be of use if the data was on the same page.

    In your original post you note that you seem to want to get the contents of a div from one page (on one domain) and place them in to a div on another page (on a different domain). Because of these pages being on different domains, it means AJAX or iframes would be useless due to cross-domain policy restrictions. jQuery does offer some cross-domain AJAX solutions but I'm not familiar enough with those to be certain they will or will not solve your problem.

    In the end, it doesn't matter if you code in asp, jsp, php, java or any language at all; I have included the entire source code for what you would need to accomplish this. As long as your web server/host supports PHP then everything should work without any trouble. The PHP code posted is the entire file and you would merely need to update the AJAX code so that it uses whatever filename you set for this PHP file. From there you will have a fully functional way of grabbing any data from one div (or any element) on any page (given it has an id attribute set and you know the id) and place this data inside of any element on your own page.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Dec 2010
    Posts
    130
    thank for the great explanation.

    i dont have any problem using php in my server, the only problem is that im a little lost.

    where do i define the url and div id??

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    881
    So essentially, once you have that PHP code copied into a new file and saved it as 'whatever.php' you just need to insert that script anywhere on your page (but in the <head> tags would be a good idea for tidy code). Make sure you also update the javascript so that it sends and gets data from the php file you just created:
    Code:
    xmlhttp.open("POST", "whatever.php", true);
    As far as 'defining' the url and div id go, this is something that depends entirely on you. Just based on your example in your original post it would be something like
    Code:
    _LoadExtData("http://www.xpto.com/", "id1", "id2")
    This is assuming you have this code/function on the site with the second url you listed: http://www.otpx.com/

    The last thing I should mention is that I noticed the first site was using frames. Theoretically, this shouldn't cause any problems but I have personally never tested a script like this with sites that use frames so it's hard to say if there will be any problems. If there are it would have to be adjusted to check for frames and then find your data.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Dec 2010
    Posts
    130
    thanks, iv made your replacements but it didnt work. the xpto.com is just an example the site i target doesnt have frames just div.

  8. #8
    Join Date
    Dec 2010
    Posts
    130
    heres my full code.

    hope you can help

    HTML Code:
    <%@ Language=VBScript %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Product Specs</title>
    	
    	<link rel="stylesheet" href="css/image-slideshow.css" type="text/css">
    	<script type="text/javascript" src="js/image-slideshow.js"></script>
    	
    <%
    	dim varref, varspecs, numeroimg, tituloprod, precoprod, url,vardetails
    	'Dim fs, strFileNameAndPath,dummy
    	dim perc, precodx, percent, meufinal,cat,scat
    
    
    	cat=request.querystring("cat")
    	scat=request.querystring("scat")
    
    	if request.form("sku")<>"" then
    		varref=TRIM(request.form("sku"))
    		varref=replace(varref, "'" , "")
    	elseif request.querystring("varref")<>"" then
    		varref=request.querystring("varref")
    		varref=replace(varref, "'" , "")
    	end if
    
    	perc=request.querystring("perc")
    	if perc="" then
    	perc="0"
    	end if
    
    	precodx="15"
    
    	url = "http://www.dx.com/"&varref 
    	   
    	vardetails="overview-detailinfo"
    	varspecs="specification-detailinfo"
    	tituloprod="headline"
    	precoprod="price"
    %>		
    		
    	<script type="text/javascript">
    		function setReqObj() {
    		  var nAjax;
    		  if(window.XMLHttpRequest) {
    			nAjax = new XMLHttpRequest();
    		  } else {
    			nAjax = new ActiveXObject("Microsoft.XMLHTTP");
    		  }
    		  return nAjax;
    		}
    				 
    		function _LoadExtData("http://www.dx.com/<%=varref%>", "headline", "Copiatitul") {
    		  var xmlhttp = setReqObj();
    
    		  if(xmlhttp) {
    			xmlhttp.onreadystatechange=function() {
    			  if(xmlhttp.readyState == 4) {
    				var $content = xmlhttp.responseText;
    				document.getElementById($div).innerHTML = $content;
    			  }
    			}
    
    			$data = "url=" + $url + "&id=" $id;
    
    			xmlhttp.open("POST", "script.php", true);
    			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    			xmlhttp.send($data);
    		  }
    		}
    	</script>
    	
    	
    </head>
    <body>
    
    
    <div id="titulo" style="width:100%;text-align:center;font-size:55px;"><u>Product Viewer</u></div>
    		<br>		
    <div id="form" style="width:100%;text-align:center;font-size:25px;">
    		<form id="dx" name="dx" method="Post">
    			Sku:<input type="text" name="sku" value="<%=varref%>">
    			<input type="submit" name="dx" id="dx" value="Go">
    		</form>
    </div>
    <br>
    <%if varref<>"" then%>
    	<div id="main" style="width:1000px;margin:0 auto;">
    	<form id="dados" name="dados" method="Post">
    
    		<div id="left" style="float:left;">
    			<b>ID:</b>
    			<div id="Copiasku">Sku<%=varref%></div>
    			<br>
    			<b>Title:</b><br>
    			<div id="Copiatitul"></div>
    			
    			<br>
    			<b>DX Price:</b><%=precodx%>
    								
    			<br>
    		
    			<br>
    			<b>Specs:</b><br>
    			<textarea rows="15" name="obs" id="textboxes" style="width:550px;"><div id="Copiaspecs"></div></textarea>
    			
    			<br>
    			<b>Details:</b><br>
    			<textarea rows="5" name="obs" id="textboxes" style="width:550px;"><div id="Copiadetails"></div></textarea>
    	
    		</div>
    
    		<div id="right" style="float:right;">
    			<b>Images<b/>
    				<div id="dhtmlgoodies_slideshow">
    					<div id="previewPane">
    						<img style="widht:400px;height:320px;" src="images/imagig.jpg">
    						<span id="waitMessage">Loading image. Please wait</span>	
    						<div id="largeImageCaption">No Picture Selected</div>
    					</div>
    					<div id="galleryContainer">
    						<div id="arrow_left"><img src="images/arrow_left.gif"></div>
    						<div id="arrow_right"><img src="images/arrow_right.gif"></div>
    						<div id="theImages">
    										
    								
    								<div id="slideEnd"></div>
    						</div>
    					</div>
    				</div>
    				<br>
    				<div style="float:right;"><input type="submit" name="dados" id="dados" value="Go"></div>
    		</div>
    	</form>	
    	</div>
    <%end if%>
    </body>
    </html>
    thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles