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

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).

i program in asp not php :s

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

any ideas?

thanks

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.

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??

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.

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.

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