How can I use jQuery for messing with a particular div, but not in the current document - in a variable, that contains HTML?

Question

How can I use jQuery for messing with a particular div, but not in the current document - in a variable, that contains HTML?

The point is that I want to show a preview of a page (a piece of it's content) in a modal window, when the link to this page is clicked. Well, onClick I load this whole HTML into a variable via JSON and then... how would I find a particular div I need in it? It's gonna be almost impossible to parse it with PHP before converting it into JSON and giving back to jQuery processor because of a deep hierarchy. Basically, is it even possible to do smth like $( 'div#some-id' ).blabla(); not for the current document, but for the document, stored in a variable?

Thx everyone in advance.

Answer 1

Use the optional context argument to the jquery calls. In other words,

$('div#some-id', document).blabla();

Answer 2

jQuery's .load() can load page fragments into an element:

$('#modalWindow').load('http://example.com/ #content');

Answer 3

You could also do it like this (which is similar to what @nsayer wrote:

$.get(url, {parameters}, function(data){
    $('#somePartOfThePage', data);
});

Answer 4

If you're using the jQuery $.ajax function, you can do something like this...

$.ajax({
  success: function(responseText) {
    $("#previewDiv").html($("div#content", responseText).html());
  }
});

The "success" method will return html (or whatever you set the $.ajax dataType property to), in this case I've given it the name "responseText" (though you can put in any valid variable name here). Then, I've searched through the responseText, grabbed the html of the #content div, and inserted it into the preview div.

Does that sound like what you were wanting to do?