load a specific element from an ajax loaded page

Question

So...um, how can I load a specific DIV from a page loaded via ajax?

I have this working

$.get(url,function(content){
    //ajax content here

});

there is a div called #content from the page being loaded. I want to load that div into my div called #wrap on the main page.

I was thinking something like this maybe

$("#wrap").load($(content).find("#content"));

So you are loading an entire page from the ajax get, and you want to pull one div out of that, and put the content inside another? — Jess, Apr 02 '11 at 23:36

score 5 · Answer 1 · answered Apr 02 '11 at 23:50

5

Load can use a selector...

$('#wrap').load('ajax/test.html #container');

Pulled directly from the jQuery Documentation: http://api.jquery.com/load/

answered Apr 02 '11 at 23:50

jbrookover

5,100
1
23
23

score 2 · Accepted Answer · answered Apr 02 '11 at 23:52

2

Here is what I would do:

$.post('THE LINK',
    function(data)
    {
        $('#wrap').html($(data).select('#content').html());
    }
);

The fiddle: http://jsfiddle.net/mazzzzz/P77Ev/

answered Apr 02 '11 at 23:52

Jess

8,628
6
49
67

hmmm, your fiddle differs from your answer – Eli Apr 03 '11 at 00:04
Because jsfiddle has /echo/html to post back html, I use that to give a functioning answer (check the ajax tab on the left). – Jess Apr 03 '11 at 00:15
quick question, I think I know why my page isn't being loaded correctly. In the url page I have jquery make some elements on the fly that I want to target in the AJAX call. How can I get that markup to be created just like it would if I accessed the second page independently? – Eli Apr 03 '11 at 00:17
I'm not sure if that is possible, ajax (to the best of my knowledge) doesn't run javascript on the called page. You could look at the eval command, or use iframes instead. – Jess Apr 03 '11 at 00:19
Looking at the jQuery source, there is no execution of remote javascript on the second page. So, yes, you would need to use an invisible iFrame to accomplish this. – jbrookover Apr 03 '11 at 00:43

score 0 · Answer 3 · answered Apr 02 '11 at 23:50

0

jQuery.load() already does that for you (look under 'Loading Page Fragments'). In your case, get rid of the call to $.get() and use the following instead:

$("#wrap").load(url + ' #content');

answered Apr 02 '11 at 23:50

no.good.at.coding

20,221
2
60
51

score 0 · Answer 4 · edited Aug 13 '12 at 14:31

0

$("#wrap").load(url + " #content", data, function(text, data, xhr){alert("success!");});

edited Aug 13 '12 at 14:31

j0k

22,600
28
79
90

answered Apr 02 '11 at 23:51

DefyGravity

5,681
5
32
47

load a specific element from an ajax loaded page

4 Answers4

Linked