¿Cómo puedo usar jQuery.load para reemplazar un div incluyendo el div

Question

Tengo un div con el id de "secondHeader" y quiero reemplazar ese div completo con otro div con el mismo id de "secondHeader" pero en lugar de reemplazándolo, simplemente agrega el div cargado dentro del primero.

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

Esto es lo que sucede ...

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

Lo que quiero que suceda es el div secondHeader de la carga ajax para reemplazar por completo la secondHeader en la página inicial.

Sé que suena tonto, pero esto es lo que estoy tratando de lograr ... Cuando un usuario no está conectado, se ve un encabezado no conectado. Estoy usando ajax para permitir que la persona inicie sesión en el sitio y deseo reemplazar el encabezado no registrado con el que está conectado a través de ajax.

he intentado todo lo que sé como ...

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

... y el uso de .Remove() antes de la mano ...

¿Alguna idea?

Answer 1

Creo que la mejor manera es utilizar get en lugar de cargar. En su caso se puede hacer así:

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

[Editar: se ha eliminado una paren]

Actualización: Si /logged-in-content.html tiene algo más que el código que necesita, puede envuelva los datos que regresan en otro objeto jQuery y use .find() para extraer el contenedor. Pruebe esto:

$ ("# secondHeader"). ReplaceWith ($ (datos).find ("# secondHeader"));

Answer 2

¿Podría refinar su selector en el método load()?

Por ejemplo,

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

De esta manera, usted no está agarrando el div en sí, que está agarrando su contenido.

Answer 3

$ .load no es realmente la mejor opción aquí ya que esa función está destinada a completar el contenido de un div, como ya has visto. En su lugar, puede usar $.get y configurar la función de devolución de llamada para reemplazar su div original, o cambiar el contenido registrado.html para excluir el div.

Además, tenga en cuenta que, como una solución basada en Javascript, si los usuarios miran la fuente, verán que pueden obtener acceso a la sesión en el contenido.html con solo escribirla en la barra de direcciones si No lo estoy asegurando de alguna otra manera.

Answer 4

Quiere envolver en div antes de insertarlo.

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

se puede añadir un DIV contenedor alrededor de su div "secondHeader"? Entonces usaría:

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

Answer 6

Otra forma en que funcionaba mejor para mí:

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

Answer 7

respuesta final:

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

jQuery load añade la respuesta en el elemento seleccionado. jQuery's replaceWith SUSTITUYE el elemento seleccionado.

<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 

Yo sugiero agregar una función para jQuery que hace las dos cosas:

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

Answer 8

siempre tengo una función jQuery se define así:

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

Entonces puedo tampoco decir

$(...).load(url) 

o

$(...).loadOuter(url) 

El segundo hace lo que quiere hacer. También tengo una función llamada loadInner que solo llama carga por lo que vale.

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

o como función

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

Después de haber cargado el contenido, los niños encuentran su #second y desenvolverlo.

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

Answer 11

tuve este problema también, pero yo era capaz de utilizar .load mediante la reestructuración del código de este modo: (jade)

div#view 
    div.content 
     block content 

y el guión como tal ...

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

, por lo tanto, seleccione el elemento secundario en lugar de la misma etiqueta.

Answer 12

Usando $ .get() trabajado para mí, pero tenía que extraer el contenedor desde el primer documento de respuesta:

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