How can I use jQuery.load to replace div including div

Question

I have a div with the identifier "secondHeader" and I want to replace the whole div with another div with the same identifier "secondHeader", but instead of replacing it, it simply adds the loaded div inside the first.

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

Here's what happens ...

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

What I want to do is div the secondHeader from the ajax load to completely replace secondHeader on the start page.

I know this sounds silly, but here is what I'm trying to accomplish ... When the user is not logged in, they see an unclaimed header. I use ajax to allow a person to enter the site, and I want to replace the unclaimed header with login through ajax.

I tried everything I know, for example ...

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

... and using .remove () in front of the hand ...

Any ideas?

Answer 1

I think the best way is to use get instead of loading. In your case, you can do the following:

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

[Edit: deleted guy]

Update: If / logged -in-content.html has more than just the necessary code, you can wrap the returned data in another jQuery and use .find () to retrieve the container. Try the following:

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

Answer 2

Could you clarify your selector in the load () method?

For example,

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

Thus, you do not capture the div itself, you capture its contents.

Answer 3

Another way that worked best for me:

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

Answer 4

The final answer:

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

jQuery load adds an INTO response to the selected item. jQuery replaceWith REPLACES the selected item.

 <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 

I suggest adding a function in jQuery that does both:

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

Answer 5

Using $ .get () worked for me, but first I needed to extract the container from the response document:

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

Answer 6

$. The load here is not the best choice, since this function is designed to simply fill the contents of the div, as you saw. You can just use $. Get instead and set the callback function in place of the original original or change logged-in-content.html to exclude the div.

Also keep in mind that as a Javascript solution, if your users look at the source, they will see that they can access logged-in-content.html by simply typing it in their address bar, without fixing it yet.

Answer 7

I always have a jQuery function defined as follows:

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

Then i can say

 $(...).load(url) 

or

 $(...).loadOuter(url) 

The second does what you want to do. I also have a loadInner function that just calls the load, for what it's worth it.

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

or as a function

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

After you have downloaded the content, find its #second and expand it.

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

Answer 10

You want to wrap a div before embedding it.

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

Can you add a DIV container around your div "secondHeader"? Then you will use:

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

Answer 12

I have the same problem. My solution, which worked for me, was that I embedded the child div inside and updated the 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")); 

Answer 13

I had this problem too, but I was able to use .load by restructuring the code as follows: (jade)

 div#view div.content block content 

and the script is the same ...

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

to target a child instead of the same tag.