Can jquery code be triggered by ajax success?

Question

I know that I can add any code inside ajax success like this

$.ajax({
      type: 'GET',
      url: element.href,
      dataType: 'json',
      success: function (data) {
        //mycode

And mycode would be executed after previous script is done. But is it possible that jquery script alone can somehow detect certain ajax success and be triggered only by that? I posted this question to this forum because drupal uses behaviours which might be helpful with that. But that is my guess only. Thank you for any clues.

Answer 1

Yes this is possible to track ajax reuests anywhere in code by jQuery alone, there are some Global Ajax Event Handlers in jquery you can use methods from it like:

.ajaxComplete():Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

.ajaxError(): Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

.ajaxSend(): Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

.ajaxStart(): Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

.ajaxStop(): Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

.ajaxSuccess(): Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

The last one .ajaxSuccess() is what you need.

you can use it like this:

$( document ).ajaxSuccess(function( event, xhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The ajax response was: " +
      xhr.responseText );
  }
});

Answer 2

In my case y use Jquery custom events.

for example

$('form').submit(
    function(){
        return $.ajax({
            url: $(this).attr("action"),
            data:data,
            processData: false,
            contentType: false,
            type: "POST",
            dataType : "json",
            success: function( result ) {
                $form.trigger('submit:success');
            },
            error: function( xhr, status, errorThrown ) {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
                $form.trigger('submit:error');
            },
            complete: function( xhr, status ) {
                $form.trigger('submit:complete');
                console.log( "The request is complete!" );
        }
    }
);


 $('form.SpecialForm').on('submit:success', myFunction1);

 $('form.OtherSpecialForm').on('submit:success', otherFunction);

 $('form.ThirdSpecialForm').on('submit:error', thirdFunction);

 $('form.OneMoreSpecialForm').on('submit:complete', oneMoreFunction);

 $('form.theLastSpecialForm').on('submit:complete', theLastFunction);