Search code examples
javascriptjqueryclosuresrevealing-module-pattern

Accessing private variables in a jQuery callback with the module pattern

The below executes without errors, but the DOM isn't updated.

var Cart = function() {
  var $cart;

  function init() {
    $cart = $("#cart");

    this.refresh();
  }

  function refresh() {
    $.ajax({
      // ...
      success: function(html) {
        $cart.html(html); // $cart seems to exist as JS object, but #cart doesn't get updated in the DOM.
        $("#cart").html(html); // This works!
      }
    });
  }

  return {
    init: init,
    refresh: refresh
  }
}();

$(function() {
  Cart.init();
});

Update

I wasn't actually calling Cart.init() inside the jQuery ready event contra to what the code above says.

Solution

  • Check your #cart object exists when you call Cart.init(). That's the only difference I see between your two working and not working code as there is no other problem (see fiddle).