global ajaxStop and form's onSucess function

Question

I have a code which show loading spinner:

 $(document)
   .ajaxStart(function () {
       var indicator = $('#busyIndicator');
       indicator.show();
    })
    .ajaxStop(function () {
       var indicator = $('#busyIndicator');
       indicator.hide();
 })

And I have a function fires on form success:

 function onSuccess() {     
    $('#busyIndicator').show();
 }

This is html(some code and attributes is omitted):

<div id="busyIndicator" style="display: none;">
        <img alt="" src="/Images/Animation/steamtrain.gif">
</div>
<form method="post" id="createForm" data-ajax-success="onSuccess" data-ajax-method="POST"  data-ajax="true">...</form>

The onSuccess function is called, but the image not visible. I tryed to insert debugger after this line:

$('#busyIndicator').show();

In this case the image is visible. I think the problem in that ajaxStop fires after onSuccess. I can change code only in the onSuccess function. How to solve it?

on ajaxStart you .show your indicator and on ajaxStop hide it, but why you would want to show it onsuccess ? i dont get it, i would think onsucces ou would want to hide it, doesnt the code work without your onsuccess function ? — john Smith, Dec 27 '13 at 11:50
and you need to add an option to your ajax call : "global:true" — john Smith, Dec 27 '13 at 11:52
@johnSmith: `ajaxStop` and `ajaxStart` I use globally for all my forms. But for this form I need this case, because there are redirect after ajax request (it's takes long time), and I want to show it again (while browser is think) — user348173, Dec 27 '13 at 11:53
The global Ajax events are bubbling up to the document, so they will fire after the options set in `$.ajax`, and as `ajaxStop` is based on the `complete` handler, if fires later than `success` as well — adeneo, Dec 27 '13 at 11:56
@user348173 then you need to add the option "global:false" then the ajaxStart and stop wont take place — john Smith, Dec 27 '13 at 12:13

score 0 · Answer 1 · edited May 23 '17 at 12:28

If you want an ajax call not making use of the global ajaxStart and ajaxStop. you need to specify this as an option in your ajax call. just set global to false.

$.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
    global: false    // this disables the global ajaxStart and ajaxStop events.
})
.done(function(response) {
    console.log("success");
    //do something on success
})
.fail(function(error) {
    console.log("error");
    //do something on error
})
.always(function() {
    console.log("complete");
    //this will be done always unrelated to succes or error
});

also you could use namespaces to bind and unbind the ajaxStart and AjaxStop events when needed. this is already explained here:

How to call .ajaxStart() on specific ajax calls

global ajaxStop and form's onSucess function

1 Answers1