Как я могу использовать 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>

Я хочу, чтобы произошел div secondHeader из загрузки ajax, чтобы полностью заменить secondHeader на начальной странице.

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

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

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

... и использование .remove () перед рукой ...

Есть идеи?

Answer 1

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

Например,

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

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

Answer 2

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

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

[Редактировать: убрал парен]

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

$ ( "# secondHeader") ReplaceWith ($ (данные) .find ( "# secondHeader"));.

Answer 3

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

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

Answer 4

Окончательный ответ:

$.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 5

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

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

Answer 6

У меня всегда есть функция 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, которая просто вызывает load для того, чего она стоит.

Answer 7

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

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

Answer 8

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

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

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

У меня была такая же проблема. Мое решение, которое сработало для меня, состояло в том, что я встроил дочерний div внутри и обновил дочерний div:

HTML:

<div id="secondHeader">
  <div id="secondHeaderChild">
     What currently is in secondHeader goes here....
  </div>
</div>

---

Ajax:

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