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.

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.

• javascript
• html

• What do you mean? Where are the pages (on disk? in tabs? in frames?) Do you want to do this on the server side or client? – annakata Commented Mar 23, 2009 at 11:06
• He means he has an external page with 5 divs, and wants to populate a single div on his main.html with the contents of one of the divs on the external page – karim79 Commented Mar 23, 2009 at 11:20
• Are you using a server side view technology like JSP/ASP/PHP? If so you could consider using its page-include facilities. Otherwise just go ahead with jQuery. – BalusC Commented Nov 19, 2009 at 21:06

3 Answers 3

Use Javascript and JQuery. See http://docs.jquery./Manipulation or specifically http://docs.jquery./Ajax/load

To be precise use something like this:

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

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

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];
  }
});