AJAX загружает внешнюю страницу div в текущую страницу

Question

Я пытаюсь загрузить div с другой страницы с помощью AJAX, но, похоже, загружает всю страницу в мой div. Я хотел бы просто загрузить конкретный div.

$('.overlay').on('click', function() { 
    var page_url = $(this).attr('href'); 

    $.ajax({ 
     url: page_url + ' #single_portfolio', 
     dataType: 'html', 
     success: function(data) { 
      $('#overlay').html(data); 
     } 
    }); 

    return false; 
}); 

Пожалуйста, дайте мне знать, что я делаю неправильно.

Answer 1

FIDDLE

Вы можете сделать это с .load():

$('#overlay').load(page_url + ' #single_portfolio'); 

Если вы должны использовать $.ajax() попробовать это:

$.ajax({ 
    url: page_url, 
    dataType: 'html', 
    success: function(data) { 
     $('#overlay').html($(data).children('#single_portfolio')); 
     //or $(data).filter('#single_portfolio') 
    } 
}); 

Answer 2

Вы не можете использовать селектор CSS в удаленном документе через AJAX, как вы пытаетесь. #single_portfolio после URL-адреса будет действовать как hash (без места спереди). Вам нужен URL-адрес, который возвращает именно то, что вам нужно для вашего вызова AJAX. Кроме того, вы можете получить всю страницу и выполнить некоторую обработку в функции обратного вызова, чтобы извлечь нужную часть.

Answer 3

Вы можете использовать $('#overlay').load(page_url + ' #container'); вместо вашего $.ajax() вызова

См http://api.jquery.com/load/

Answer 4

К сожалению, вы пытаетесь заменить $.ajax вызов для $.load вызова. Только $.load имеет возможность загружать фрагменты страниц. Из $.loaddocumentation: метод

.load(), в отличие от $ .get() позволяет указать части удаленный документ, который будет вставлен. Это достигается с помощью специального синтаксиса для параметра url. Если один или несколько символов пробега: , включенный в строку, часть строки, следующая за первым , считается селектором jQuery, который определяет загружаемое содержимое .

$('#overlay').html(strLoadingBar).load(page_url + ' #single_portfolio'); 
// assuming you have your loading bar assigned to a string variable "strLoadingBar" 

Когда этот метод выполняется, он извлекает содержимое Ajax/test.html, но потом JQuery разбирает возвращенный документ, чтобы найти элемент с идентификатором контейнера. Этот элемент вместе с его содержимым вставлен в элемент с идентификатором результата, а остальная часть извлеченного документа отбрасывается.

jQuery использует свойство браузера .innerHTML для анализа извлеченного документа и вставки его в текущий документ. Во время этого процесса браузеры часто фильтруют элементы из документа, например , или элементы. В результате элементы, полученные с помощью .load(), могут быть не такими, как если бы документ был получен непосредственно у браузера.