Sending $(this) in a callback

Question

I have this jQuery click event

$('#sidebar .nav a span').click(function () {
  var sidebar_nav = $(this);
  $("#main").load("type_change.php?id="+id, successCallback);

And then i have the callback to do the binding

var successCallback = function(responseText, textStatus, XMLHttpRequest) {
  //doing all the binding in here
}

Is there a way to pass $(this) or sidebar_nav or to the successCallback function so I can do something with it

Answer 1

You could use $.proxy:

$("#main").load("type_change.php?id="+id, $.proxy(successCallback, $(this)));

This will set this inside successCallback to whatever you pass as second parameter.

If you want this still to refer to $("#main"), then you could change the callback to accept one more parameter:

var successCallback = function(responseText, textStatus, XMLHttpRequest, target) {
  //doing all the binding in here
}

and call it like so:

var sidebar_nav = $(this);
$("#main").load("type_change.php?id="+id, function() {
    var args = $.makeArray(arguments);
    args.push(sidebar_nav);
    successCallback.apply(this, args);
});

target will refer to sidebar_nav.

Answer 2

Wrap it in a function, and use .apply() to invoke your function:

$('#sidebar .nav a span').click(function () {
  var sidebar_nav = this;
  $("#main").load("type_change.php?id="+id, function() {
       successCallback.apply( sidebar_nav, arguments );
   });

Now, this in your callback will be the element that was clicked, and the other arguments to the load() callback will be passed along as well.

Answer 3

Another solution would be to generate the callback function and provide this as an argument to the generator:

var genSuccessCallback = function (element) {
  return function(responseText, textStatus, XMLHttpRequest) {
    // use "element" here
  }
}

$("#main").load("type_change.php?id="+id, genSuccessCallback(this));

Answer 4

Is there any reason that you couldn't use an anonymous function in the callback? For instance:

$('#sidebar .nav a span').click(function () {
    var sidebar_nav = $(this);
    main.load("/shop_pos/includes/business_type_change.php?industry_category_id="+industry_category_id+"&business_type_id="+business_type_id+"&class_id="+class_id+"&quantity="+quantity, '', function (responseText, textStatus, XMLHttpRequest) {
        // Function can read sidebar_nav here
        if (textStatus == 'success') {
            // Do stuff here, including that $.post that you might want to do.
        }
    });