jQuery should I use multiple ajaxStart/ajaxStop handling

Question

Maybe there is no difference, but is either way better than the other (or perhaps a mysterious 'third' way better than both!)...

first:

var startTime;

$(document).ready(function() {

    $("#lbl_ajaxInProgress").ajaxStart(function() {
        // store the current date/time...
        startTime = new Date();
        // update labels
        $(this).text('Yes');
        $("#lbl_ajaxCallTime").text("-");
    });

    $("#lbl_ajaxInProgress").ajaxStop(function() {
        // update labels
        $(this).text('No');
        $("#lbl_ajaxCallTime").text(myFunctionThatCalculatesTime(startTime));
    });

});

second:

var startTime;

$(document).ready(function() {

    $("#lbl_ajaxInProgress").ajaxStart(function() {
        // update labels
        $(this).text('Yes');
    });

    $("#lbl_ajaxInProgress").ajaxStop(function() {
        // update labels
        $(this).text('No');
    });

    $("#lbl_ajaxCallTime").ajaxStart(function() {
        // store the current date/time...
        startTime = new Date();
        // update labels
        $(this).text("-");
    });

    $("#lbl_ajaxCallTime").ajaxStop(function() {
        // update labels
        $(this).text(myFunctionThatCalculatesTime(startTime));
    });

});

As of jQuery 1.8, the .ajaxStart() method should only be attached to document. — ThdK, Oct 16 '14 at 09:50
Does this answer your question? [Disable ajaxStart() and ajaxStop() for a specific request](https://stackoverflow.com/questions/12604722/disable-ajaxstart-and-ajaxstop-for-a-specific-request) — ahmet, May 28 '20 at 20:12

score 43 · Accepted Answer · answered Jun 30 '09 at 06:18

43

An interesting fact is that ajaxStart, etc. are actually just jQuery events. For instance:

$("#lbl_ajaxInProgress").ajaxStart(function() {
  // update labels
  $(this).text('Yes');
});

is equivalent to:

$("#lbl_ajaxInProgress").bind("ajaxStart", function() {
  // update labels
  $(this).text('Yes');
});

This means that you can also attach namespaces to ajaxStart/ajaxStop, etc. Which also means that you can do:

$("#lbl_ajaxInProgress").unbind("ajaxStart ajaxStop");

You could also do:

$("#lbl_ajaxInProgress").bind("ajaxStart.label", function() {
  // update labels
  $(this).text('Yes');
});

$("#lbl_ajaxInProgress").bind("ajaxStop.label", function() {
  // update labels
  $(this).text('No');
});

And then:

$("#lbl_ajaxInProgress").unbind(".label");

Cool, huh?

answered Jun 30 '09 at 06:18

Yehuda Katz

28,535
12
89
91

certainly is! i'm assuming here, but you're saying that it doesn't matter which way? – davidsleeps Jun 30 '09 at 10:16
the ajaxStart helper is equivalent to the click helper, which just delegates to bind, so yes, it doesn't matter either way. – Yehuda Katz Jun 30 '09 at 17:21
2

As of jQuery 1.8, the .ajaxStart() method should only be attached to document. – ThdK Oct 16 '14 at 09:50
this solution is not working now as jQuery has brought new rules. – yogihosting Jan 14 '17 at 10:23

Zigri2612 · Answer 2 · 2017-03-28T08:14:01.183

Use Ajax Call This Way ....

<!DOCTYPE html>
<html lang="en">
<head>
<title>Shouting Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
 src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
</head>
<body>
 <button type="submit" class="btn btn-default"
  onclick="ajaxRequest(this);">
  <i class="fa fa-refresh"></i> Ajax Call
 </button>
 <script>
  function ajaxRequest(id) 
    {
      // ajax request
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
                delay: 600
            },
            dataType: 'html',
            beforeSend: function() { 
                //  alert("start");
    $(id).find('i').addClass('fa-spin');
   },
            success: function(data) {
                alert('Fired when the request is successfull');
            },
            complete:function(){  
                 //   alert("stop");
    $(id).find('i').removeClass('fa-spin');
   }
        });
}</script>
</body>
</html>

jQuery should I use multiple ajaxStart/ajaxStop handling

first:

second:

2 Answers2

Linked