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

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 reemplazarlo, simplemente agrega el div cargado dentro del primero.

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

Esto es lo que pasa…

 

Lo que quiero que suceda es el segundo div de encabezado de la carga de ajax para reemplazar totalmente el segundo encabezado en la página inicial.

Sé que suena tonto, pero esto es lo que bash lograr … Cuando un usuario no está conectado, 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 usando .remove () antes de la mano …

¿Algunas ideas?

Creo que la mejor manera es usar get en lugar de load. En tu caso, puedes hacer esto:

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

[Editar: eliminó una paren]

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

$ (“# secondHeader”). replaceWith ($ (data) .find (“# secondHeader”));

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

Por ejemplo,

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

De esta manera, no estás agarrando el div mismo, estás agarrando su contenido.

Otra forma que funcionó mejor para mí:

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

Respuesta final:

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

La carga de jQuery agrega la respuesta EN el elemento seleccionado. jQuery’s replaceWith REEMPLAZA el elemento seleccionado.

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

Sugiero agregar una función a jQuery que haga ambas cosas:

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

Usar $ .get () funcionó para mí, pero primero tuve que extraer el contenedor del documento de respuesta:

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

$ .load no es realmente la mejor opción aquí, ya que esa función pretende simplemente completar el contenido de un div, como ya has visto. En su lugar, puede usar $ .get y establecer la función de callback para reemplazar su div original, o cambiar el log-in-content.html para excluir el div.

También 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 iniciada en content.html simplemente escribiéndola en su barra de direcciones si no se está asegurando de alguna manera más.

Siempre tengo una función jQuery definida 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 decir

 $(...).load(url) 

o

 $(...).loadOuter(url) 

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

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

o como función

 $.fn.replaceWithRemote = function( source, callback ) { var target = $(this); var temp = $('
'); temp.load(source, function() { target.replaceWith(temp.contents()); if (callback != null){ callback(); } }); } $('#secondHeader').replaceWithRemote('/logged-in-content.html #secondHeader');

Después de que haya cargado el contenido, busque sus hijos #second y #second .

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

Desea envolver en div antes de insertarlo.

 $.ajax({ url: "/logged-in-content.html", success: function(response){ var loadedheader = $("
").append( response.replace(/

¿Puedes agregar un contenedor DIV alrededor de tu div “segundo encabezado”? Entonces usarías:

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

Tuve este problema también, pero pude usar .load al reestructurar el código como .load : (jade)

 div#view div.content block content 

y el guión así …

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

así que apunte al niño en lugar de la misma etiqueta.