'Destination DIV' disappearing in simple jQuery AJAX call

Question

Edit: Important: It is extremely unlikely that anybody who has come across this will have the exact same problem as me - check my answer below for my very obscure solution. There were however some useful responses that may apply to other's situations. Good luck if you're having a similar problem.

---

I've got a really simple jQuery AJAX call :

$("#cart").load("/woops/store/cartsummary"); 

This returns (by means of an ASP.NET MVC Action) some very simple HTML:

<DIV>something</DIV>

On my page I have a destination DIV which is initially populated with some HTML:

<div class="padding15" id="cart">
   <% RenderCart(ViewData.Model.CartItems); %>
</div>

The problem is when the call returns the original #cart div just disappears instead of being replaced. If I look at the DOM in Chrome it is just completely empty. The correct HTML is definitely being returned because I see it in Fiddler.

In addition this code works (but obviously isn't what I want because it is appending) :

$.get("/woops/store/cartsummary", {}, function(data) {
    $("#cart").append(data); 
});

I think I'm just doing something stupid - but I'm switching from Microsoft AJAX to jQuery and I think theres just some small fundamental thing I'm misunderstanding. Where's my DIV gone?

(BTW: 'woops' is a virtual directory to make sure my site has no root relative links during development)

Answer 1

append

does not replace your div. It pastes the data at the back of your div.

You could try

replaceWith( content ) 

instead.

replaceWith in jQuery documentation

Answer 2

Wow! Well that was crazy.

Turns out the problem is because of this code that I have in an included JS file:

 jQuery.fn._init = jQuery.fn.init
 jQuery.fn.init = function(selector, context) {
     if (typeof selector === 'string') {
         return jQuery.fn._init(selector, context).data('selector', selector);
     }
     return jQuery.fn._init(selector, context);
 };

I am using jQuery 1.2.6.

The code above came from this post How do I get a jQuery selector's expression as text?. i think the author since rewrote it, but its breaking this for some strange reason.

The DIV just disappears - but i got thrown because replaceWith() DID work and so did append(). I guess some of the other methods mus internally being tripped up by this but those two werent.

Thanks for everyones quick suggestions. I'm sure they'll help out others some point.

Answer 3

try

$.get("/woops/store/cartsummary", {}, function(data) {
    $("#cart").html(data); 
});

(jQuery docs)

Answer 4

Perhaps try this?

$.get("/woops/store/cartsummary", {}, function(data) {
    $("#cart").html(data); 
});

Answer 5

Check the ID of your div, make sure the correct ID is being passed on to jquery.