Как я могу использовать jQuery.load для замены div, включая div

Question

У меня есть div с идентификатором «secondHeader», и я хочу заменить весь этот div на другой div с тем же идентификатором «secondHeader», но вместо заменив его, он просто добавляет загруженный div внутри первого.

$("#secondHeader").load("/logged-in-content.html #secondHeader"); 

Это то, что происходит ...

<div id="secondHeader"><div id="secondHeader"></div></div> 

То, что я хочу, чтобы это произошло это secondHeader делений от Аякса нагрузки, чтобы полностью заменить secondHeader на начальной странице.

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

Я пробовал все, что я знаю, такие как ...

$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html #secondHeader")); 

... и используя .remove(), прежде чем руки ...

Есть идеи?

Answer 1

Я думаю, что лучший способ - использовать вместо загрузки. В вашем случае вы можете сделать так:

$.get("/logged-in-content.html #secondHeader", function(data) { 
    $("#secondHeader").replaceWith(data); 
}); 

[Edit: удалили скобка]

Update: Если /logged-in-content.html имеет больше, чем просто код вам нужно, вы можете оберните возвращаемые данные в другой объект jQuery и используйте .find() для извлечения контейнера. Попробуйте следующее:

$ ("# secondHeader"). ReplaceWith ($ (data).найти ("# secondHeader"));

Answer 2

Не могли бы вы уточнить свой селектор в методе load()?

Например,

$("#secondHeader").load("/logged-in-content.html #secondHeader > *"); 

Таким образом, вы не захватывая сам DIV, вы схватив его содержимое.

Answer 3

$ .load - это не лучший выбор здесь, поскольку эта функция предназначена только для заполнения содержимого div, как вы видели. Вместо этого вы можете использовать $.get и установить функцию обратного вызова, чтобы заменить исходный div или изменить logged-in-content.html, чтобы исключить div.

Также имейте в виду, что в качестве Javascript-решения, если ваши пользователи будут смотреть на источник, они увидят, что они могут получить доступ к logged-in-content.html, просто набрав его в своей адресной строке, если вы «Это еще не так.

Answer 4

Вы хотите обернуть div, прежде чем вставлять его.

$.ajax({ 
    url: "/logged-in-content.html", 
    success: function(response){ 
     var loadedheader = $("<div/>").append(
     response.replace(/<script(.|\s)*?\/script>/g, "") 
     ).find('#secondHeader > *').html(); 
     $("#secondHeader").append(loadedheader); 
    } 
}); 

Answer 5

Можете ли вы добавить контейнер DIV вокруг своего div «secondHeader»? Тогда вы будете использовать:

$('#secondHeaderContainer').load('/logged-in-content.html #secondHeader'); 

Answer 6

Другой способ, который работает лучше для меня:

$('#div_to_replace').load('/ajax/loader', function() { 
    $(this).children(':first').unwrap(); 
}); 

Answer 7

Final Ответ:

$.fn.loadWith = function(u){var c=$(this);$.get(u,function(d){c.replaceWith(d);});}; 
$("#test").loadWith("somelink.html"); 

JQuery load добавляет ответ в элемент выбран. jQuery's replaceWith ЗАМЕНЯЕТ выбранный элемент.

<div id="curElement">start</div> 

$("#curElement").load("somelink.html"); 
will result in: 
<div id="curElement">What ever was in somelink.html</div> 


$("#curElement").replaceWith("somelink.html"); 
will result in: 
What ever was in somelink.html 

Я предлагаю добавить функцию к JQuery, что делает как:

$.fn.loadWith = function(u){ 
    var c=$(this); 
    $.get(u,function(d){ 
     c.replaceWith(d); 
    }); 
}; 
$("#test").loadWith("somelink.html"); 

Answer 8

У меня всегда есть функция JQuery, определенный следующим образом:

jQuery.fn.loadOuter = function(url, callback) 
    { 
     var toLoad = $(this); 
     $.get(url, function(data) { 
      toLoad.replaceWith(data); 
      if (callback != null && callback != undefined) 
       callback(); 
     }); 
    } 

Тогда я могу либо сказать

$(...).load(url) 

или

$(...).loadOuter(url) 

Вторая делает то, что вы хотите. У меня также есть функция loadInner, которая просто вызывает нагрузку для того, что ее стоит.

Answer 9

var target = '#secondHeader'; 
var pathname = '/logged-in-content.html'; 
var source = pathname + ' ' + target; 
var temp = jQuery('<div></div>'); 
temp.load(source, function() { 
jQuery(target).replaceWith(temp.contents()); 
}); 

или как функция

$.fn.replaceWithRemote = function(source, callback) { 
    var target = $(this); 
    var temp = $('<div></div>'); 
    temp.load(source, function() { 
     target.replaceWith(temp.contents()); 
     if (callback != null){ 
      callback(); 
     } 
    }); 
} 

$('#secondHeader').replaceWithRemote('/logged-in-content.html #secondHeader'); 

Answer 10

После того, как вы загрузили содержимое, найти своих детей #second и разворачивать его.

$("#secondHeader").children().unwrap(); 

Answer 11

Я имел этот вопрос, как хорошо, но я был в состоянии использовать .load путем реорганизации кода следующим образом: (нефрит)

div#view 
    div.content 
     block content 

и сценарий, как так ...

$("#view").load($(this).attr("href") + " div.content") 

так нацеливайте ребенка вместо того же тега.

Answer 12

Использование $ .get() работал для меня, но я должен был извлечь контейнер из ответа первого:

$.get("/page.html", function (data) { 
    var elem = $(data).find('#container'); 
    $("#puthere").replaceWith(elem); 
});