Form submit handler executing before ajaxStop

Marco Published at Dev

Marco

I've set some handlers for this whole project to show/hide the loading div.

Some of them are ajaxStart, ajaxStop (both binded to $(document)) and submit that is bind to the forms.

I can't understand why the ajaxStop is executing after the form.submit in the sample bellow:

var blobs = [];

var echo = function echo(data, type) {
  var blob = window.URL.createObjectURL(new Blob([data], {
    "type": type
  }));

  blobs.push(blob);

  return blob
};

$(document).ready(function() {
  $('form').on('submit', function(e) {
    console.log('form submit');
    e.preventDefault();
  });
}).ajaxStart(function() {
  console.log('ajaxStart');
}).ajaxStop(function() {
  console.log('ajaxStop');
});

$('button').click(function() {
  $.get(echo("Sample data", "text/html"), function(data) {
    if (data != '')
      $('#frm').submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form id="frm">
  <button type="button">
    Send
  </button>
</form>

Rory McCrossan

The reason is because ajaxStop() is called after the complete event fires on all active AJAX requests.

You see the form submit in the console because you fire that event in the success handler, which occurs before complete.

Collected from the Internet

Please contact [email protected] to delete if infringement.