JQuery: Как извлечь элементы из одной страницы с помощью AJAX, манипулировать ими и вставить их в DOM текущей страницы?

Question

Я новичок в JQuery. Я не обязательно ищу код - просто кто-то, чтобы указать мне правильное направление или посоветовать мне лучший подход.

Вот сценарий:

Когда кто-то нажимает ссылку на pageA.html , я хочу отобразить все содержимое DIV с идентификатором « sampleId », который существует на pageB. html в DIV на странице A с именем " placeHolderId ". Для этого, я думаю, я могу просто использовать что-то вроде следующего кода:

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

Но я действительно хочу сначала манипулировать содержимым #sampleId (особенно изменяя любые идентификаторы, которые могут конфликтовать с идентификаторами на текущей странице) перед его загрузкой. Я думал о загрузке его в неотображаемый контейнер на странице A, но я подозреваю, что это неправильный способ сделать это, и, кроме того, я не уверен, как бы я изменил идентификаторы, как только они станут частью DOM .

Я думаю, что ответом является использование низкоуровневого метода AJAX (?), Но я не уверен, как на самом деле манипулировать данными (например, изменить любой идентификатор в рамках называемого "main" на "sub"):

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

В какой-то момент я нашел пост, где кто-то говорил о фильтрах, я думаю, но, похоже, не могу найти его снова.

Любая помощь, советы или рекомендации будут с благодарностью,

Заранее большое спасибо,

David

Answer 1

Это всего лишь догадки, так как я сам не пробовал, но попробуйте заменить

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

С чем-то вроде этого.

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);

}