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?

Answer 1

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