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

Question

I have a div with the id of "secondHeader" and I want to replace that entire div with another div with the same id of "secondHeader" but instead of replacing it , it just adds the loaded div inside the first one.

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

This is what happens...

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

What I want to happen is the secondHeader div from the ajax load to totally replace the secondHeader in the initial page.

I know it sounds dumb, but here's what I'm trying to accomplish...When a user is not logged in, they see a non-logged in header. I am using ajax to allow the person to log into the site and I want to replace the non-logged in header with the logged in one via ajax.

I have tried everything I know such as...

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

...and using .remove() before hand...

Any ideas?

Answer 1

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

For example,

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

This way, you're not grabbing the div itself, you're grabbing its contents.

Answer 2

$.load isn't really the best choice here since that function's intended to just fill in the contents of a div, as you've seen. You can just use $.get instead and set the callback function to replace your original div, or change logged-in-content.html to exclude the div.

Also be aware that as a Javascript-based solution, if your users look at the source, they'll see that they can get access to logged-in-content.html by just typing it in their address bar if you're not securing it somehow else.

Answer 3

You want to wrap in div before inserting 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 4

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

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