How to get div from second page display in first page

Question

In my main.html page I have a button. When that button is clicked, I need to get the content of another page.

The target page has five divs, I need to catch one div and display that div data in main.html page.

Answer 1

Use Javascript and JQuery. See http://docs.jquery.com/Manipulation

To be precise use something like this:

$("#yourdiv").load("/yourpage.html #section");

Answer 2

As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:

new Ajax.Request('http://url.of.second/page', {
  method: 'get',
  onSuccess: function(transport) {

    //make a regular expression to grab the required HTML fragment
    var re = /<div id="otherdiv">(.*)</div>/i;

    //extract the fragment from transport.responseText
    var found = transport.responseText.match(re);

    //add the fragment to targetdiv on current page
    $('targetdiv').innerHTML=found[1];
  }
});

Answer 3

jQuery can do this very elegantly:

<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {

    //bind to button id="myButton" click event
    $('#myButton').click(function() {

        //populate div id="myDiv" with specific div (div id="someDiv") from another page            
        $('#myDiv').load('/anotherPage.html #someDiv');
    });
});
</script>

See jQuery Ajax/load

Answer 4

Jiri's answer is spot on. http://docs.jquery.com/Ajax/load is the exact jquery link. Thanks Jiri...