How to pass jQuery Ajax success-handler value

Question

Give the following Ajax call in jQuery:

{ . . . , getSomeData: function(args, myUrl, foo) { $.ajax( { type: "GET", url: myUrl, data: args, async: true, dataType: 'json', success: myHandler }); }, myHandler: function (data, textStatus, oHTTP, foo){ ... } }; 

Can the foo value be somehow added to the arguments passed to the myHandler success myHandler ? Is there any way to pass the value to the server in GET and return that value to the client in the opposite direction, again appearing in the list of success handler arguments? I cannot change the structure of what is returned in data .

Answer 1

If you declare myHandler in the request, you can use closure .

 getSomeData: function(args, myUrl, foo) { $.ajax( { type: "GET", url: myUrl, data: args, async: true, dataType: 'json', success: function (data, textStatus, oHTTP){ ... } }); }, 

that way, foo will be available to you in the success callback.

Answer 2

If you are a $ .ajax call in a class, and the success callback is passed by the method of this class, it does not work.

EDIT: Here is the answer. Note that I define the ajaxCall function as a method in the class. I define this.before, this.error, and this.success as ajaxCall methods, because they can call methods from the superclass.

 function main(url){ this.url = url; this.ajaxCall = function(){ this.before = function(){ //Can call main class methods }; this.error = function(){ //Can call main class methods }; this.success = function(data){ //Can call main class methods }; //This is how you pass class arguments into the success callback var that = this; $.ajax({ url: this.url, type: 'GET', dataType: 'json', beforeSend: this.before(), error: this.error(), success: function(data){that.succes(data);} }); //Run internally by calling this.ajaxCall() after it is defined //this.ajaxCall(); } //Or externally var main = new main(SOME_URL); main.ajaxCall(); 

Answer 3

@ Unicron had the correct answer, but he did not give a good example. Check this:

 $( 'tr.onCall' ).on( 'click', function( event ) { let pEvent = function() { return event; } // like a fly in amber... $.ajax( { ... success: function( data ) { let x = pEvent(); // x now equals the event object of the on("click") } }); }); 

By declaring a pEvent function inside an anonymous function that fires on("click") , the event object is "frozen" (encapsulated) in its original context. Even when you call it in another context of the ajax success function, it retains its original context.

A more specific example: I'm going to open a modal dialog box (in the style of Div) by clicking, but when the dialog box is closed, I want to return focus to the element that was clicked to open it first ...

 $( 'tr.onCall' ).on( 'click', function( event ) { let rTarget = function() { return event.currentTarget; } $.ajax( { url: 'ajax_data.php', ...other settings... success: function( data ) { modal_dialog( data, { returnTarget: rTarget(), ...other settings... } ); } }); }); 

If successful, it calls the user-defined function modal_dialog() (defined elsewhere), passing an object containing various settings. The returnTarget parameter contains the HTML attribute of the element that was clicked; so when I close the dialog, I can run $(options.returnTarget).focus(); return focus to this element.