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

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

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

Вот что происходит...

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

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

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

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

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

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

Любые идеи?

Ответ 1

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

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

[Изменить: удалили парень]

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

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

Ответ 2

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

Например,

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

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

Ответ 3

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

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

Ответ 4

Итоговый ответ:

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

jQuery load добавляет ответ INTO в выбранный элемент. jQuery 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");

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Вы хотите обернуть 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);
    }
});

Ответ 11

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

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

Ответ 12

У меня такая же проблема. Мое решение, которое сработало для меня, состояло в том, что я встроил дочерний div внутри и обновил child 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"));

Ответ 13

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

div#view
   div.content
      block content

и script так же...

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

чтобы таргетинг на ребенка вместо одного и того же тега.