jQuery pass more parameters into callback

Question

Is there a way to pass more data into a callback function in jQuery   I have two functions and I want the callback to the   post  for example  to pass in both the resulting data of the AJAX call  as well as a few custom arguments  function clicked         var myDiv       my-div           ERROR  Says data not defined       post  someurl php  someData doSomething data  myDiv   json            ERROR  Would pass in myDiv as curData  wrong        post  someurl php  someData doSomething data  myDiv   json        function doSomething curData  curDiv         I want to be able to pass in my own parameters to a callback  as well as the result returned from the AJAX call

User · Answer

I ve made a mistake in the last my post  This is working example for how to pass additional argument in callback function   function custom func p1 p2          post AJAX FILE PATH  op  dosomething  p1 p1           function data               return function                    alert data                   alert p2                 data p2                       return false

User · Answer

When using doSomething data  myDiv   you actually call the function and do not make a reference to it   You can either pass the doStomething function directly but you must ensure it has the correct signature   If you want to keep doSomething the way it is  you can wrap its call in an anonymous function   function clicked         var myDiv       my-div          post  someurl php  someData  function data          doSomething data  myDiv         json        function doSomething curData  curDiv                Inside the anonymous function code  you can use the variables defined in the enclosing scope  This is the way Javascript scoping works

User · Answer

You can also try something like the following   function clicked          var myDiv       my-div           post  someurl php  someData function data           doSomething data  myDiv          json        function doSomething curData  curDiv

User · Answer

You can use a closure of JavaScript   function wrapper  var1  var2          put here your variables     return function  data  status             Handle here results of call          and when you can do     post  someurl php  data wrapper var1  var2  etc      html

User · Answer

A more general solution for sending asynchronous requests using the  ajax   jQuery API and closures to pass additional parameters to the callback function   function sendRequest method  url  content  callback           additional data for the callback     var request             method  method          url  url               ajax           type  method          url  url          data  content         done function data  status  xhr            if  callback  callback xhr status  data  request           fail function xhr  status            if  callback  callback xhr status  xhr response  request

User · Answer

If someone still comes here  this is my take       selector   click myCallbackFunction bind  var1   hello   var2   world       function myCallbackFunction event        var passedArg1   this var1          passedArg2   this var2     What happens here  after binding to the callback function  it will be available within the function as this   This idea comes from how React uses the bind functionality

User · Answer

It s actually easier than everyone s making it sound    especially if you use the   ajax     base syntax vs  one of the helper functions   Just pass in the key  value pair like you would on any object  when you setup your ajax request     because   this  hasn t changed context yet  it s still the trigger for the bind call above    lt script type  text javascript  gt      qty input   bind  keypress change   function           ajax           url    order items change     this  attr  data-order-item-id     qty     this  val     returnas json           type   POST           dataType   json           qty input    this           anything else i want to pass in   foo           success  function json data  textStatus  jqXHR                   here is the input  which triggered this AJAX request                console log this qty input                  here is any other parameter you set when initializing the ajax method                console log this anything else i want to pass in                          lt  script gt    One of the reasons this is better than setting the var  is that the var is global and as such  overwritable    if you have 2 things which can trigger ajax calls  you could in theory trigger them faster than ajax call responds  and you d have the value for the second call passed into the first   Using this method  above  that wouldn t happen  and it s pretty simple to use too

User · Answer

document  on  click    action register   function        registerSocket registerJSON   registerDone second   this          function registerSocket dataFn doneFn second                      ajax                          type  POST                          url   http   localhost 8080 store public register                          contentType   application json  charset utf-8                          dataType   json                          data dataFn                     done   doneFn second                       fail function err                               console log  AJAX failed      JSON stringify err  null  2                                   function registerDone data       console log JSON stringify data      function second element       console log element       Secondary way    function socketWithParam url dataFn doneFn param       ajax       type  POST       url url      contentType   application json  charset utf-8       headers     Authorization    Bearer   localStorage getItem  jwt         data dataFn        done function data         doneFn data param               fail function err status xhr       console log  AJAX failed      JSON stringify err  null  2                 document  on  click    order-btn   function      socketWithParam url fakeDataFn   orderDetailDone secondParam        function orderDetailDone data param     -- to do something --

User · Answer

In today s world there is a another answer that is cleaner  and taken from another Stack Overflow answer   function clicked         var myDiv        my-div            post   someurl php     someData   someData     proxy doSomething  myDiv    json        function doSomething  data            this will be equal to myDiv now  Thanks to jQuery proxy        var  myDiv   this          doing stuff              Here s the original question and answer  jQuery HOW TO   pass additional parameters to success callback for   ajax call

User · Answer

The solution is the binding of variables through closure     As a more basic example  here is an example function that receives and calls a callback function  as well as an example callback function   function callbackReceiver callback        callback  Hello World       function callback value1  value2        console log value1  value2       This calls the callback and supplies a single argument  Now you want to supply an additional argument  so you wrap the callback in closure   callbackReceiver callback           Hello World   undefined callbackReceiver function value        callback value   Foo Bar        Hello World    Foo Bar        Or  more simply using ES6 Arrow Functions   callbackReceiver value   gt  callback value   Foo Bar         Hello World    Foo Bar      As for your specific example  I haven t used the  post function in jQuery  but a quick scan of the documentation suggests the call back should be a function pointer with the following signature   function callBack data  textStatus  jqXHR        Therefore I think the solution is as follows   var doSomething   function extraStuff        return function data  textStatus  jqXHR               do something with extraStuff            var clicked   function         var extraStuff             myParam1   foo           myParam2   bar            an object   whatever extra params you wish to pass         post  someurl php   someData  doSomething extraStuff    json         What is happening   In the last line  doSomething extraStuff  is invoked and the result of that invocation is a function pointer   Because extraStuff is passed as an argument to doSomething it is within scope of the doSomething function   When extraStuff is referenced in the returned anonymous inner function of doSomething it is bound by closure to the outer function s extraStuff argument  This is true even after doSomething has returned   I haven t tested the above  but I ve written very similar code in the last 24 hours and it works as I ve described   You can of course pass multiple variables instead of a single  extraStuff  object depending on your personal preference coding standards

User · Answer

As an addendum to b01 s answer  the second argument of   proxy is often used to preserve the this reference  Additional arguments passed to   proxy are partially applied to the function  pre-filling it with data   Note that any arguments   post passes to the callback will be applied at the end  so doSomething should have those at the end of its argument list   function clicked         var myDiv       my-div        var callback     proxy doSomething  this  myDiv         post  someurl php  someData callback  json        function doSomething curDiv  curData           this  still refers to the same  this  as clicked       var serverResponse   curData      This approach also allows multiple arguments to be bound to the callback   function clicked         var myDiv       my-div        var mySpan       my-span        var isActive   true      var callback     proxy doSomething  this  myDiv  mySpan  isActive         post  someurl php  someData callback  json        function doSomething curDiv  curSpan  curIsActive  curData           this  still refers to the same  this  as clicked       var serverResponse   curData

User · Answer

For me  and other newbies who has just contacted with Javascript  I think that the Closeure Solution is a little kind of too confusing   While I found that  you can easilly pass as many parameters as you want to every ajax callback using jquery   Here are two easier solutions   First one  which  zeroasterisk has mentioned above  example   var  items       some class      each  items  function key  item       var url    http   request with params      item  html          ajax           selfDom         item           selfData       here is my self defined data            url           url          dataType       json           success       function data  code  jqXHR                  in   ajax callbacks                   this  keyword references to the options you gived to   ajax                if you had not specified the context of   ajax callbacks                 see http   api jquery com jquery ajax  jQuery-ajax-settings context             var  item   this selfDom              var selfdata   this selfData               item html  selfdata                                             Second one  pass self-defined-datas by adding them into the XHR object which exists in the whole ajax-request-response life span   var  items       some class      each  items  function key  item       var url    http   request with params      item  html          ajax           url           url          dataType       json           beforeSend    function XHR                               jquery        XHR             XHR selfDom     item               XHR selfData    here is my self defined data                      success       function data  code  jqXHR                  jqXHR is a superset of the browser s native XHR object             var  item   jqXHR selfDom              var selfdata   jqXHR selfData               item html  selfdata                                             As you can see these two solutions has a drawback that   you need write a little more code every time than just write     get post  url  data  successHandler     Read more about   ajax   http   api jquery com jquery ajax

User · Answer

Let s go simple         ajax       url  myUrl      context   this      this    Current  element     success  function data              proxy publicMethods update  this  data      this    Current  element

User · Answer

actually  your code is not working because when you write     post  someurl php  someData doSomething data  myDiv   json       you place a function call as the third parameter rather than a function reference

[javascript] jQuery pass more parameters into callback

Examples related to javascript

Examples related to jquery

Examples related to function

Examples related to callback

Examples related to arguments