Undefined jQuery value when trying to correct JSLint complaint: "Don't make functions within a loop"

Question

Within a jQuery ajax function data supplied to the callback function on success is defined with

success: function (data) { ...

but this makes JSLint unhappy ("Don't make functions within a loop").

If I follow the suggestion in http://stackoverflow.com/questions/3037598/how-to-get-around-the-jslint-error-dont-make-functions-within-a-loop, Firebug complains that "data is not defined" and the callback function fails.

Example:

Prior to $(document).ready(function(){

function ajaxSuccess() {
   return function (data) {
      alert (data);
   };
}

Within $(document).ready(function(){

$.ajax({
    type: "POST",
    url: "some-url-here",
    data: ({ "foo" : "bar" }),
    success: ajaxSuccess(data)
});

results in "data not defined" error.

But if I change it to

$.ajax({
    type: "POST",
    url: "some-url-here",
    data: ({ "foo" : "bar" }),
    success: function (data) {
        ajaxSuccess(data);
    }
});

then everything is hunky-dory -- but now I'm back where I started as far as JSLint is concerned.

Assuming I want to pass muster with JSLint, how do I get ahold of data returned by url and pass it on to the function in question?

Answer 1

you never take data as a parameter in your definition of ajaxSuccess.

Answer 2

You would need to remove the the data parameter from your ajaxSuccess() call, because data is not defined when you call it:

success: ajaxSuccess()

Or you really wouldn't need to have ajaxSuccess() return a function.

function ajaxSuccess(data) {
    alert(data);
}

success: ajaxSuccess

---

EDIT:

Based on your comment, you can call ajaxSuccess() like you were, and pass whatever parameters you want to it, as long as they are defined.

function ajaxSuccess( param ) {
   return function (data) {
      alert (param);
      alert (data);
   };
}

success: ajaxSuccess( "someParameter" )

Answer 3

success: needs a function, but you don't have to create one just for it.

   function ajaxSuccess(data) 
   { 
     alert (data); 
   }
 // :
 // :

$.ajax({ 
    type: "POST", 
    url: "some-url-here", 
    data: ({ "foo" : "bar" }), 
    success: ajaxSuccess     // note: no parameters, just the name.
    } 
});   

Originally, you were say "create a new function, which takes a data parmeter, and assign it to success". My version says "I already have a function which takes a data parameter (named ajaxSuccess). Assign it to success".

Answer 4

When dealing with javascript functions always think in terms of the return type. Also, there is a difference between a function reference, and a function result.

Example

// uncalled
var ajaxSuccess = function(){};     // typeof(ajaxSuccess) == 'function'
//called
var ajaxSuccess = function(){}();   // typeof(ajaxSuccess) == 'undefined'

• A funciton with no return statement returns undefined when called
• A called function runs immediately (this is why it said data is undefined)
• The assignment of an uncalled function is a reference to that function (can be called at a later point in time)
• The assignment of a called function is the return statement of that function