0

the following Ajax works

function Retrieve(el) {
    var table = this;
    this.el = el;
    this.fetchInfo = function () {
        $.ajax('data.html', {
            context: table,
            <!-- QUESTION HERE -->
            data: {
                location: table.data('location')
            },
            success: function (response) {
                this.el.find('.info').html(response).fadeIn();
            },
        }
        }

but I am wondering why I cannot replace table.data with this.data on the denoted line. Since I set the context to table variable, this now should be set to whatever table is referring to right? This holds true in the context of other members of the Ajax object (including success), but not for the members of data. Why is this the case?

data('name') extracts value from a tag with attribute data-name

2 Answers 2

1

The context variable you've given only applies within the success callback, and doesn't change anything for any of the other parameters passed to $.ajax.

The answer therefore depends on how you actually call fetchInfo. The data: variables will be resolved in whatever context fetchInfo has. Given you're experiencing problems, this suggests that you are not calling the function with your Retrieve object as its context.

EDIT this line is your problem:

this.el.on('click', 'button', this.fetchInfo);

just because you've referred to this.fetchInfo, doesn't make this the context when it's subsequently invoked. Try this instead:

this.el.on('click', 'button', $.proxy(this.fetchInfo, this));
5
  • Just to clarify, is going inside a function that kicks in the context variable to replace this's context? I am not any experiencing problems, but I just wanted to know why. How would I change my code such that this.data could replace table.data? Jul 31, 2013 at 8:18
  • You said that you "cannot replace table.data with this.data", suggesting you had tried and failed. You can replace it, so long as fetchInfo is called as this.fetchInfo() or table.fetchInfo(), thus ensuring that this inside fetchInfo has the same value as it has outside.
    – Alnitak
    Jul 31, 2013 at 8:45
  • Okay, I agree with everything that you say, but I still have not found out why the context is different for a callback and non-callback member. Could you please tell me why there is the difference? Aug 1, 2013 at 5:06
  • @Forethinker for that you would have to include some extra code in your question showing how you call the Retrieve function, and also how you call fetchInfo.
    – Alnitak
    Aug 1, 2013 at 5:09
  • Okay. I have included the extra code. I think $(document).ready(function() { part should suffice, but I included other parts of code just to be sure. Aug 1, 2013 at 5:46
0

Looking at the documentation of $.ajax(), I found that the context gets set to callbackContext variable. This gets with use success, error, beforeSend, complete, but not with data option.

AJAX options gets assigned to a variable named s:

s = jQuery.ajaxSetup({}, options),

The data option gets converted to string, but callBackContext is not used.

// Convert data if not already a string
if (s.data && s.processData && typeof s.data !== "string") {
    s.data = jQuery.param(s.data, s.traditional);
}

So it is necessary to set specify the element for data using a variable other than this.

2
  • I just rolled back to the original question, which I had before you asked me for more code. Aug 29, 2013 at 9:01
  • that's not very helpful given that it completely destroys the context (no pun intended) of the answer I had given. You wanted to know how to use this within the data: block, and the answer I gave you told you how - by fixing what this is when fetchInfo gets called.
    – Alnitak
    Aug 29, 2013 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.