jquery - load different divs from a external page

Question

I have this code and I want load from page load.php the text for each div in this page only with a load request from page load.php .

The example below load the page load.php twice :(

$('#div1').load('load.php #div1');
$('#div2').load('load.php #div2');

<div id="div1"></div>
<div id="div2"></div>

---

load.php page I have the code code:

<div id="div1">test to load1</div>
<div id="div2">test to load2</div>

How can I do it?

Answer 1

You could load the php using jQuery.get and then insert each fragment in to the desired elements:

$.get({
    url: 'page.php',
    dataType: 'html',
    success: function(response) {
        var html = $($.parseHTML(response));
        $('#div1').text(html.filter('#div1').text());
        $('#div2').text(html.filter('#div2').text());
    }
});

Edit/note if the elements ( #div1 and #div2 ) are at the top level of the loaded html, use: html.filter('#div1') ; otherwise use html.find('#div1') to select the desired node.

More about jQuery.get .