$ .Ajax events, how to create a callback?

Question

I know that the title was not very intuitive, so I will try to detail my problem:

I am creating a jQuery plugin to create asynchronous calls. With it, I can, for example, make a message using the following command:

$("form").bindAjaxPost "post" 

The problem is that I would like to create callbacks for these events ( beforeSend , complete , success , error ), for example, the command will look something like this:

 $("form").bindAjaxPost "post", success: (data) -> console.log "user success #{data}" beforeSend: () -> console.log "user beforeSend" 

Please note that the beforeSend and success event was defined by the plugin user, as well as internally in the plugin code: see code:

Post jquery plugin method

 post: (ajaxUserOptions)-> ajaxOptions = type: "POST" url: @options.url data: $(@form).serialize() dataType: @options.dataType beforeSend: -> console.log "plugin beforeSend" complete: -> console.log "plugin complete" success: (data) -> console.log "plugin success" error: (request) -> console.log "plugin error" ajaxOptions = $.extend {}, ajaxUserOptions, ajaxOptions if ajaxUserOptions $.ajax(ajaxOptions) 

Problem

I would like the success of the event to be called internally, and then the custom event plugin. (this sequence)

Execution example

Command

 $("form").bindAjaxPost "post", success: (data) -> console.log "user success #{data}" beforeSend: () -> console.log "user beforeSend" 

Output

beforeSend plugin user beforeSend plugin success user success

Attempts

As you can see in the code, I tried using the extend jQuery command. But this did not work, because $.ajax().beforeSend accepts only one function.

I also tried to access ajaxUserOptions , but ajaxUserOptions not available in success , beforeSend ... events, since these calls are asynchronous.

Thank you all for your help!

Answer 1

You may find that this is easier to implement using the Promise interface added to the return value of $.ajax in jQuery 1.5. In doing so, you can attach several callbacks to complete , success and error (preferably like always , done and fail , as the old names will become obsolete in jQuery 1.8.) So, your code may become

  post: (ajaxUserOptions = {}) -> defaultAjaxOptions = type: "POST" url: @options.url data: $(@form).serialize() dataType: @options.dataType jqXHR = $.ajax($.extend {}, ajaxUserOptions, defaultAjaxOptions) jqXHR.always pluginAlways jqXHR.always ajaxUserOptions.always if ajaxUserOptions.always # and likewise for fail and done 

beforeSend is a more complicated case, since you cannot do it on a jqXHR object, but it is just a matter of packing your plugin function and user function in one function, where if any of the functions returns false , the external function does this (as this stops Ajax request):

 beforeSend = -> return false if pluginBeforeSend() is false return false if ajaxUserOptions?.beforeSend() is false 

Answer 2

Could you call the user-called callbacks from your plugin if they exist? Similar to this:

 post: (ajaxUserOptions)-> ajaxOptions = type: "POST" url: @options.url data: $(@form).serialize() dataType: @options.dataType beforeSend: -> console.log "plugin beforeSend" ajaxUserOptions.beforeSend() if ajaxUserOptions?.beforeSend? complete: -> console.log "plugin complete" success: (data) -> console.log "plugin success" ajaxUserOptions.success(data) if ajaxUserOptions?.success? error: (request) -> console.log "plugin error" $.ajax(ajaxOptions)