CODEWITHSUNDEEP
javascripthtml
kumar
kumar

Reputation: 1127

How to get div from second page display in first 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.

Upvotes: 0

Views: 12190

Answers (3)

Jiri
Jiri

Reputation: 16625

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

To be precise use something like this:

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

Upvotes: 5

karim79
karim79

Reputation: 342655

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

Upvotes: 1

Paul Dixon
Paul Dixon

Reputation: 300865

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

Upvotes: 0

Related Questions