title: Called and canceled of the admin-ajax.php file multiple times
body: <p>I have an issue in a Wordpress installation with a plugin. There is a calendar which you can click on a day (or a range of days) and from ajax calls through <code>admin-ajax.php</code> it calculates product costs.</p>
  
  <p>The problem is that, when I click on a calendar cell, the <code>admin-ajax.php</code> is called twice. The first time for a few milliseconds and canceled immediately. Then automatically, it calls it once again and get the ajax response. When I click for a second time on a calendar cell, the <code>admin-ajax.php</code> is called 3 times. The first two are canceled and only the last one get a response.</p>
  
  <p>I found that the code that is used for this part is the following. However, I cannot find any issue on it, even if I can see those cancelled calls on Developer console.</p>
  
  <pre><code>$('.wc-bookings-booking-form')
          .on('change', 'input, select', function() {
              var index = $('.wc-bookings-booking-form').index(this);
  
              if ( xhr[index] ) {
                  xhr[index].abort();
              }
  
              $form = $(this).closest('form');
  
              var required_fields = $form.find('input.required_for_calculation');
              var filled          = true;
              $.each( required_fields, function( index, field ) {
                  var value = $(field).val();
                  if ( ! value ) {
                      filled = false;
                  }
              });
              if ( ! filled ) {
                  $form.find('.wc-bookings-booking-cost').hide();
                  return;
              }
  
              $form.find('.wc-bookings-booking-cost').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();
  
              xhr[index] = $.ajax({
                  type:       'POST',
                  url:        booking_form_params.ajax_url,
                  data:       {
                      action: 'wc_bookings_calculate_costs',
                      form:   $form.serialize()
                  },
                  success:    function( code ) {
                      if ( code.charAt(0) !== '{' ) {
                          console.log( code );
                          code = '{' + code.split(/\{(.+)?/)[1];
                      }
  
                      result = $.parseJSON( code );
  
                      if ( result.result == 'ERROR' ) {
                          $form.find('.wc-bookings-booking-cost').html( result.html );
                          $form.find('.wc-bookings-booking-cost').unblock();
                          $form.find('.single_add_to_cart_button').addClass('disabled');
                      } else if ( result.result == 'SUCCESS' ) {
                          $form.find('.wc-bookings-booking-cost').html( result.html );
                          $form.find('.wc-bookings-booking-cost').unblock();
                          $form.find('.single_add_to_cart_button').removeClass('disabled');
                      } else {
                          $form.find('.wc-bookings-booking-cost').hide();
                          $form.find('.single_add_to_cart_button').addClass('disabled');
                          console.log( code );
                      }
                  },
                  error: function() {
                      $form.find('.wc-bookings-booking-cost').hide();
                      $form.find('.single_add_to_cart_button').addClass('disabled');
                  },
                  dataType:   "html"
              });
          })
          .each(function(){
              var button = $(this).closest('form').find('.single_add_to_cart_button');
  
              button.addClass('disabled');
          });
  </code></pre>
  
  <p>And here is a screenshot from the Dev Console:
  <a href="https://i.stack.imgur.com/uxCVs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uxCVs.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT:</strong> I think I found the problem, but I am not sure. There is also this part of code which was supposed to not used at all. There is a feature for time on calendar, but it isn't activated. So, this code should not be run.</p>
  
  <pre><code>$('.wc-bookings-booking-form').on( 'date-selected', function() {
          show_available_time_blocks( this );
      });
  
      var xhr;
  
      function show_available_time_blocks( element ) {
          var $form               = $(element).closest('form');
          var block_picker        = $form.find('.block-picker');
          var fieldset            = $form.find('.wc_bookings_field_start_date');
  
          var year  = parseInt( fieldset.find( 'input.booking_date_year' ).val(), 10 );
          var month = parseInt( fieldset.find( 'input.booking_date_month' ).val(), 10 );
          var day   = parseInt( fieldset.find( 'input.booking_date_day' ).val(), 10 );
  
          if ( ! year || ! month || ! day ) {
              return;
          }
  
          // clear blocks
          block_picker.closest('div').find('input').val( '' ).change();
          block_picker.closest('div').block({message: null, overlayCSS: {background: '#fff', backgroundSize: '16px 16px', opacity: 0.6}}).show();
  
          // Get blocks via ajax
          if ( xhr ) xhr.abort();
  
          xhr = $.ajax({
              type:       'POST',
              url:        booking_form_params.ajax_url,
              data:       {
                  action: 'wc_bookings_get_blocks',
                  form:   $form.serialize()
              },
              success: function( code ) {
                  block_picker.html( code );
                  resize_blocks();
                  block_picker.closest('div').unblock();
              },
              dataType:   "html"
          });
      }
  </code></pre>