[ACCEPTED]-How can I use jQuery.load to replace a div including the div-jquery

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

For 2 example,

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

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

I think the best way is to use get instead 6 of load. In your case you can do like this:

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

[Edit: removed 5 a paren]

Update: If /logged-in-content.html 4 has more than just the code you need, you 3 can wrap the returning data in another jQuery 2 object and use .find() to extract the container. Try 1 this:

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

Another way that worked best for me:

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

0

Final Answer:

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

jQuery load adds the response INTO the element 3 selected. jQuery's replaceWith REPLACES the selected 2 element.

<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 to 1 jQuery that does both:

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

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

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

I always have a jQuery function defined 4 like this:

    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 either say

$(...).load(url)

or

$(...).loadOuter(url)

The second 3 one does what you want to do. I also have 2 a function called loadInner which just calls 1 load for what its worth.

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

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

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

0

After you have loaded the content, find 1 its children #second and unwrap it.

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

I used this and my problem was resolved 4 because if I use another way It isn't working 3 correctly.

$("#formLabel").replaceWith($("#formLabel"))

This way I only load the part 2 of the page that I want without affecting 1 the functionality of the rest of the page.

You want to wrap in div before inserting 1 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);
    }
});

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

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

I had the same problem. My solution that 1 worked for me was that I embedded a 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"));