CODEWITHSUNDEEP
jquery
brian
brian

Reputation: 3

jQuery load 2 divs from a page into 1 div

Okay, new to jQuery so hopefully this is an easy question and I am just missing something. I want to load 2 divs from a page on my site to a div on another page when a link is clicked something along the lines of:

$('#result').load('test.html #div1 #div2');

Here is what I have so far:

<a onmouseover="" style="cursor: pointer;" onclick='$("#col2").load("oldPage.htm #div1");'>Display content</a>

This works, but it only loads 1 Div, if I try to add another from the "oldPage" it doesn't work. Ideas? again keep in mind I am new to this.

Thanks.

Upvotes: 0

Views: 391

Answers (1)

user428517
user428517

Reputation: 4193

Let's use a function to make this easier. I'll call it load_divs:

HTML:

<a style="cursor: pointer;" onclick='load_divs();return false;'>Display content</a>

JavaScript:

function load_divs() {
    $("#col2").load("oldPage.htm #div1");
    $("#col2").append($("<div>").load("oldPage.htm #div2"));
}

An even better way to attach this event handler would be to give your a element an id and add the handler using jQuery:

HTML:

<a id="display_link" style="cursor: pointer;">Display content</a>

JS:

$("#display_link").click(function() {
    $("#col2").load("oldPage.htm #div1");
    $("#col2").append($("<div>").load("oldPage.htm #div2"));
});

Alternatively, if the divs you want to load are side-by-side in the DOM, you can wrap them in another div then load just that one.

Upvotes: 1

Related Questions