How can I debug this JQuery function?

Question

I have a named helper function to be called from various bootstrap modal windows which are "shopping assistants" on a website I'm working on. All this function does is to initiate an AJAX call to a PHP page which sends back a JSON-encoded array. That is working!

What isn't working is what I thought would be the simplest part of the function: When the function is called it overlays the screen with a spinner (that part is working), and when it's done with the AJAX call it is supposed to hide the spinner. That's the part that isn't working, and I can't figure out why. I think I've been looking at it so long that my brain refuses to work. Here is the code:

function getDetailHandler(prodType, id, element) { // Takes type of product, ID number, and element name)
  $('#spinner').modal('show');
  $.ajax({
    url: '/productHelper.php?type=' + prodType + '&id=' + id,
    type: 'get',
    dataType: 'JSON',
    success: function(response) {
      var len = response.length;
      for (var i = 0; i < len; i++) {
        var id = response[i].id;
        var size = response[i].size;
        var msrp = response[i].msrp;
        var retail = response[i].retail;
        var description = response[i].description;
        var name = response[i].name;

        if (prodType == 2) {
          var tr_str = description;
        } else if (prodType == 3) {
          var tr_str = name + ' added';
        } else {
          var tr_str = size + ' added';
        }
      }
      $('#spinner').modal('hide');
      $('#' + element + '').append(tr_str);

    }
  });
};

The part that's baffling to me is that every other part of the function is working perfectly. It just refuses to hide the modal at the end. Obviously it's my fault somewhere, but I really can't see what I'm doing wrong.

ON EDIT: Here is the calling function:

$('#controlForm').submit(function(e) {
    var sum = 0;
    e.preventDefault();
    $('#addControl').show();
    $('#addControl').append($(document.activeElement).attr('value'));
    $('#addControl').append('<span class="addLightText" style="display:inline";></span><a href="#removeControl" class="removeControl"><i class="fa fa-times-circle fa-2x" name="removeControl" title="Remove Control From Configuration" style="color: Tomato; position: relative;margin-left: 10px; top: 5px;"></i></a>');
    $('#addControl').data('price', $(document.activeElement).attr('value'));
    $('#addControl').attr('data-idnumber', $(document.activeElement).attr('id'));
    $('#addControl').attr('data-price', $(document.activeElement).attr('value'));
    $('#addToCart').append('<input type="hidden" name="controlID" value="' + $(document.activeElement).attr('id') + '" />');
    getDetailHandler(3, $('#addControl').attr('data-idnumber'), 'controlUpdated');
    doSum();

    $('#addControlButtonElement').hide();
    $('#addControlModal').modal('toggle');
});

NOW FIXED I wound up modifying the function to more tightly hook Ajax's start and stop functions using what I found here: https://stackoverflow.com/a/15013828/13114324. It works like a charm!!

Thank you to everyone for your time :)

function getDetailHandler(prodType, id, element) {
    $.ajax({
        url: '/productHelper.php?type='+prodType+'&id='+id,
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
                for(var i=0; i<len; i++){
                    var id = response[i].id;
                    var size = response[i].size;
                    var msrp = response[i].msrp;
                    var retail = response[i].retail;
                    var description = response[i].description;
                    var name = response[i].name;

                    if(prodType == 2){
                        var tr_str = description;
                    } else if(prodType == 3) {
                        var tr_str = name + ' added';
                    } else {
                        var tr_str = size + ' added';
                    }
                    $('#'+element+'').append(tr_str);
                }
        }
    });
};

$(document).ajaxSend(function(event, request, settings) {
    $('#spinner').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#spinner').hide();
});

Answer 1

It could be that the show is still transitioning when hide is called. Looking at the Bootstrap modal.js file there is an _isTransitioning guard set in the show function if you're using the 'fade' class. If _isTransitioning is true while hide is called then hide is ignored.

To test this try wrapping the hide in a settimeout function, say 500ms, and see if the hide works.

setTimeout(function(){$('#spinner').modal('hide')}, 500);