'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

try

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

(jQuery docs)

Answer 2

Perhaps try this?

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

Answer 3

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 4

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

Answer 5

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 http://stackoverflow.com/questions/500246/how-do-i-get-a-jquery-selectors-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.