2

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.

  • Drupal behaviors are for executing JavaScript in a Drupal page, which is not what happens during an AJAX request. When the success callback is called depends from jQuery; I don't see any way to filter when the success callback is called. Eventually, you could return specific data to the callback, and check for those data in the callback. – kiamlaluno Dec 5 '14 at 4:32
  • If you have control in the page callback that returns ajax data, note that you can return any Ajax command. I work with ajax a lot and never needed to it the way you are asking. – AyeshK Dec 5 '14 at 12:38
  • @AyeshK I do not work with ajax and probably I try to reinvent the wheel here. I imagine an ajax success on current page and on same page there is a jquery script waiting to be triggered by this. But I can imagine more scripts on one page that produce ajax success. I do not want my script to be triggered by all of them. Not sure if that makes sense what I am asking. – loparr Dec 5 '14 at 13:04
  • Yes it does make sense. What exactly are you trying to do with the ajax success event? – AyeshK Dec 5 '14 at 13:08
  • @AyeshK On the same page I have a list of orders. Using rules_link module I change the status of orders (the ajax response in my question is from the module). After that I am refreshing the same view to show changes. For now, I just put refreshing script inside success code. But ideally I would like my refresh script to detect this particular success and be triggered by that. – loparr Dec 5 '14 at 13:28
5

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 );
  }
});
| improve this answer | |
  • Thank you, could you provide a simple example how is it possible to use it in a code? How does script know that this ajax success that should trigger another script? – loparr Dec 5 '14 at 9:54
  • see the edits and if you need even more detail go through documentation and give some try as well. – Ashish Bairagi Dec 5 '14 at 9:58
0

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);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.