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 How to fix jslint error 'Don't 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?

user113716 · Answer 1 · 2010-09-24T17:17:05.867

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" )

score 2 · Accepted Answer · answered Sep 24 '10 at 16:48

2

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".

answered Sep 24 '10 at 16:48

James Curran

101,701
37
181
258

Great. Thanks, but what if there's another parameter involved e.g. we rely on globals? – PartialOrder Sep 24 '10 at 17:02
ajaxSuccess can have as many parameters as success takes. I just used one as an example. – James Curran Sep 24 '10 at 18:08
And the lightbulb flickers on. Thanks James – PartialOrder Sep 24 '10 at 19:24

score 0 · Answer 3 · answered Sep 24 '10 at 16:48

0

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

answered Sep 24 '10 at 16:48

0x1F602

865
5
22

score 0 · Answer 4 · answered Sep 24 '10 at 17:13

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

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

4 Answers4