JQuery: How to extract elements from one page using AJAX, manipulate them and insert them in the DOM of the current page?

Question

Hi,

I'm new to JQuery. I'm not looking necessarily for code -- just someone to point me in the right direction or advise me on the best approach.

Here's the scenario:

When someone clicks a link on pageA.html, I want to display the entire contents of a DIV with an ID of "sampleId" which exists on pageB.html into a DIV on page A called "placeHolderId". For this, I think I can simply use something like the following code:

$(document).ready(function() {
   $('a').click(function() {
      $('#placeHolderId').load('pageB.html #sampleId');
   })
})

But what I really want to do is manipulate first the contents of #sampleId (especially modifying any IDs which might clash with IDs on the current page) before it loads. I thought about loading it into a non-displayed container on page A but I suspect this isn't the right way to do it and besides I'm not sure how I'd change the IDs once they've become part of the DOM.

I think the answer is to use the low level AJAX method (?) but I'm not sure how to actually manipulate the data (e.g. change any ID within called "main" to "sub"):

$.ajax({
  url: 'pageB.html',
  type: 'GET',
  dataType: 'html',
  success: function(data) {
  // THIS IS WHERE I'M LOST...
  }
});

I found a post at some point where someone talked about filters, I think, but can't seem to find it again.

Any help, tips or advice would be greatly appreciated,

Many thanks in advance,

David

Answer 1

This is all just guesswork since I havent tried it myself, but try replacing

function(data) {
// THIS IS WHERE I'M LOST...
}

With something like this.

function(data)
{
    //Let jQuery attempt to parse the info
    var fakeBody = $(data);
    //use fakebody as a context for your basic manipulation
    $('a.someClass',fakeBody).attr('href','http://google.com');
    //retrieve some nodes
    var menuItems = $('li.menuItem',fakeBody);
    //add that to your current menu

    $('ul.menu').append(menuItems);

}