jquery this pointer scope when call a function in ajax

Question

I want to call a external function from $.ajax when getting through a xml file, but I am confused by the scope of this pointer in this case.

so in my ajax function

function getCustomerInfo (customerID) {
    $.ajax ({
        type: "GET",
        url: "./content/customer_list.xml",
        dataType:"xml",
        success: function (xml) {
            $(xml).find("customer[value=" + customerID + "]").each(function(){

//I want to create a function and call here to achieve the following commented code
//the commented code works fine. I just want to change it to a function because 
//otherwise I have to hard code many similar lines...

// so here is the current function I call:
                addCustomerDetails("timeAdded", "time_added");

// the following code works fine:
                // var timeAdded = $(this).children('time_added').text();
                // var lastUpdate = $(this).children('last_update').text();
                // $("#time_added").html("<p>" + timeAdded + "</p>");
                // $("#last_update").html("<p>" + lastUpdate + "</p>");

            });
        }
    });
}

So the current addCustomerDetails function:

function addCustomerDetails (varName, tagName) {
    window[varName] = $(this).children("time_added");
    $("#"+tagName).html("<p>"+window[varName]+"</p>");
}

So I need a variable name as the argument, so I used window[varName]. Maybe this is also a problem, but I think the $(this) in addCustomerDetails() also doesn't seem work.

I hope I have explained it clearly. Please post any questions if this isn't clear enough and realllly appreciate your help!!

dfsq · Accepted Answer · 2014-12-20T14:42:49.213

function addCustomerDetails (tagName) {
    var tag = $(this).children(tagName).text();
    $("#" + tagName).html("<p>" + tag + "</p>");
}

and call it like this:

addCustomerDetails.call(this, "time_added");
addCustomerDetails.call(this, "last_update");

Or following this path you can invent something even more convenient to use:

$(xml).find("customer[value=" + customerID + "]").each(appendTag('time_added', 'last_update'));

where appendTag will look like:

function appendTag() {
    var tags = [].slice.call(arguments);
    return function() {
        for (var i = 0; i < tags.length; i++) {
            var tag = $(this).children(tags[i]).text();
            $("#" + tags[i]).html("<p>" + tag + "</p>");
        }
    };
}

score 0 · Answer 2 · edited May 23 '17 at 12:05

When you call getCustomerInfo, assuming the caller has access to addCustomerDetails, you can save a reference to it before you make your ajax call and then use that reference to call addCustomerDetails or pass it as the caller if assigned 'self' doesn't have access, like:

var self = this;

$.ajax(
   ....
   self.addCustomerDetails(...);
);

If addCustomerDetails isn't in the context of self, the other option is:

addCustomerDetails.apply(self, ...)

For differences between call and apply, you can check this SO thread:

What is the difference between call and apply?

jquery this pointer scope when call a function in ajax

2 Answers2