Why does my loading GIF non spinning while jQuery ajax call is running?

Hi, I don’t understand why my loading gif doesn’t spin the following is my javascript code, sorry is quite log:

var kmg_admin_edit_group = function() {

        // Store table id into a variable
        var table = $('#kmg_admin_group_list');
        var form = $('#kmg_admin_edit_group_form');
        var error = $('.alert-danger', form);
        var success = $('.alert-success', form);
        var warning = $('.alert-warning', form);

        // If user close modal then it shouldn't show previous messages when modal opened again
        $('#kmg_admin_edit_group_modal').on('hidden.bs.modal', function () {
            $('.alert_custom').removeClass('alert-danger');
            $('.alert_custom').removeClass('alert-success');
            $('.alert_custom').removeClass('alert-warning');
            $('.has-error').removeClass('has-error');
            $('.alert_custom').removeAttr('style');
            // Remove validation
            form.validate().resetForm();

        });

        // Handle click on button edit bank account
        table.on('click', '.kmg_admin_edit_group', function(e) {

            // Get group bank account ID associated to the edit button
            var km_group_id = $(this).attr("id");
            // Show edit group bank account modal
            $("#kmg_admin_edit_group_modal").modal("show");


            // Get bank account details and show them in the form imputs
            $.ajax({  

                method:"POST",  
                data:{
                    km_group_id: km_group_id,
                    ajax_action: 'kmg_admin_get_group_details'
                },  
                dataType:"JSON", 
              

                 beforeSend: function() {
                    // Show loader
                    $(".modal-loader").show();
                },

                success: function(response){ 

                    if(response.notice_code == KM_WARNING_CODE){
                        // Add class alert danger to the message
                        $('.alert_custom', $('.horizontal-form')).removeClass('alert-danger');
                        // Remove class alert warning if was left by previous validation
                        $('.alert_custom', $('.horizontal-form')).addClass('alert-warning').show();
                        // Remove class alert success if was left by previous validation
                        $('.alert_custom', $('.horizontal-form')).removeClass('alert-success');
                        // Show error message
                        $('#kmg_admin_edit_group_message_modal').html(response.notice_message);

                    }

                    $('#kmg_edit_group_type').val(response.km_group_tipology);
                    // Refresh selctpicker to load the value 
                    $('#kmg_edit_group_type').selectpicker('refresh'); 
                    $('#kmg_edit_group_name').val(response.km_group_name);
                    $('#kmg_edit_group_address').val(response.km_group_address);
                    $('#kmg_edit_group_fiscalcode').val(response.km_group_fiscalcode);
                    $('#kmg_edit_group_note').val(response.km_group_note);
      
                        $.ajax({

                            url: 'https://raw.githubusercontent.com/matteocontrini/comuni-json/master/comuni.json',
                            dataType: 'JSON',
                            async: true,

                            complete: function(){    $(".modal-loader").hide(); },

                            success: function(result) {

                                // $(".modal-loader").hide();
                             
                                var jsonData = JSON.stringify(result);

                                $.each(JSON.parse(jsonData), function (key, entry) {
                                    $('#kmg_edit_group_city').append('<option value="' + entry.nome + '">' + entry.nome + '</option>');
                                });

                                $('#kmg_edit_group_city').selectpicker('refresh');

                                if(response.km_group_postcode !== ""){

                                    // $(".kmg_show_edit_group_input_postcode").show();
                                    // $('#kmg_edit_group_input_postcode').val(response.km_group_postcode);
                                    $('#kmg_edit_group_city').val(response.km_group_city);
                                    $('#kmg_edit_group_city').selectpicker('refresh'); 
                                    $('#kmg_edit_group_province').val(response.km_group_province); 

                                        $.each(JSON.parse(jsonData), function (key, entry) {

                                            if (entry.nome == response.km_group_city){
                                                // check if the array has more than one value, it helps to decide if we want to show dropdown menu or simple input field
                                                var nome_comune_array = entry.cap.length;

                                                // If the array has more than one value then show the dropdown menu
                                                if(nome_comune_array > 1){
                                                    $(".kmg_show_edit_group_dropdown_postcode").show();
                                                    $(".kmg_show_edit_group_input_postcode").hide();
                                                    // add value to the imput field

                                                    $.each(entry.cap, function( index, value ) {
                                                        $('#kmg_edit_group_dropdown_postcode [value='+response.km_group_postcode+']').prop('selected', true);
                                                        $('#kmg_edit_group_dropdown_postcode').append('<option value="' + value + '">' + value + '</option>');
                                                    });
                                                    // refresh selectpicker in the dropdown
                                                    $('#kmg_edit_group_dropdown_postcode').selectpicker('refresh');
                                                }
                                                // If the array has only one value then show only input field
                                                if(nome_comune_array === 1){

                                                    $(".kmg_show_edit_group_input_postcode").show();
                                                    $(".kmg_show_edit_group_dropdown_postcode").hide();
                                                    // add value to the imput field
                                                    $('#kmg_edit_group_input_postcode').val(response.km_group_postcode);
                                                    
                                                }

                                            }

                                        })

                                    $(document).on('change', '#kmg_edit_group_city', function(){

                                        // Make sure we empty the input field before populating it
                                       $("#kmg_edit_group_dropdown_postcode").empty();
                                        
                                        var nome_comune = $(this).val();

                                        $.each(JSON.parse(jsonData), function (key, entry) {

                                            if (entry.nome == nome_comune){
                                                // check if the array has more than one value, it helps to decide if we want to show dropdown menu or simple input field
                                                var nome_comune_array = entry.cap.length;
                                                // Populate provincd fiedl
                                                $('#kmg_edit_group_province').val(entry.sigla);
                                                // If the array has more than one value then show the dropdown menu
                                                if(nome_comune_array > 1){
                                                    $(".kmg_show_edit_group_dropdown_postcode").show();
                                                    $(".kmg_show_edit_group_input_postcode").hide();
                                                    $.each(entry.cap, function( index, value ) {
                                                        $('#kmg_edit_group_dropdown_postcode').append('<option value="' + value + '">' + value + '</option>');
                                                    });
                                                    // refresh selectpicker in the dropdown
                                                    $('#kmg_edit_group_dropdown_postcode').selectpicker('refresh');
                                                }
                                                // If the array has only one value then show only input field
                                                if(nome_comune_array === 1){

                                                    $(".kmg_show_edit_group_input_postcode").show();
                                                    $(".kmg_show_edit_group_dropdown_postcode").hide();
                                                    // add value to the imput field
                                                    $('#kmg_edit_group_input_postcode').val(entry.cap);
                                                    
                                                }

                                            }

                                        })

                                    });

                                } 

                                if(response.km_group_postcode == ""){

                                    $('#kmg_edit_group_city').val(response.km_group_city);
                                    $('#kmg_edit_group_city').selectpicker('refresh'); 
                                    $('#kmg_edit_group_province').val(response.km_group_province);

                                    $.each(JSON.parse(jsonData), function (key, entry) {

                                            if (entry.nome == response.km_group_city){
                                                // check if the array has more than one value, it helps to decide if we want to show dropdown menu or simple input field
                                                var nome_comune_array = entry.cap.length;

                                                // If the array has more than one value then show the dropdown menu
                                                if(nome_comune_array > 1){
                                                    $(".kmg_show_edit_group_dropdown_postcode").show();
                                                    $(".kmg_show_edit_group_input_postcode").hide();
                                                    $.each(entry.cap, function( index, value ) {
                                                        $('#kmg_edit_group_dropdown_postcode').append('<option value="' + value + '">' + value + '</option>');
                                                    });
                                                    // refresh selectpicker in the dropdown
                                                    $('#kmg_edit_group_dropdown_postcode').selectpicker('refresh');
                                                }
                                                // If the array has only one value then show only input field
                                                if(nome_comune_array === 1){

                                                    $(".kmg_show_edit_group_input_postcode").show();
                                                    $(".kmg_show_edit_group_dropdown_postcode").hide();
                                                    // add value to the imput field
                                                    $('#kmg_edit_group_input_postcode').val(entry.cap);
                                                    
                                                }

                                            }

                                        })

                                    $(document).on('change', '#kmg_edit_group_city', function(){

                                        // Make sure we empty the input field before populating it
                                       $("#kmg_edit_group_dropdown_postcode").empty();
                                        
                                        var nome_comune = $(this).val();

                                        $.each(JSON.parse(jsonData), function (key, entry) {

                                            if (entry.nome == nome_comune){
                                                // check if the array has more than one value, it helps to decide if we want to show dropdown menu or simple input field
                                                var nome_comune_array = entry.cap.length;
                                                // Populate provincd fiedl
                                                $('#kmg_edit_group_province').val(entry.sigla);
                                                // If the array has more than one value then show the dropdown menu
                                                if(nome_comune_array > 1){
                                                    $(".kmg_show_edit_group_dropdown_postcode").show();
                                                    $(".kmg_show_edit_group_input_postcode").hide();
                                                    $.each(entry.cap, function( index, value ) {
                                                        $('#kmg_edit_group_dropdown_postcode').append('<option value="' + value + '">' + value + '</option>');
                                                    });
                                                    // refresh selectpicker in the dropdown
                                                    $('#kmg_edit_group_dropdown_postcode').selectpicker('refresh');
                                                }
                                                // If the array has only one value then show only input field
                                                if(nome_comune_array === 1){

                                                    $(".kmg_show_edit_group_input_postcode").show();
                                                    $(".kmg_show_edit_group_dropdown_postcode").hide();
                                                    // add value to the imput field
                                                    $('#kmg_edit_group_input_postcode').val(entry.cap);
                                                    
                                                }

                                            }

                                        })

                                    });

                                }
                              
                            }

                        });

                },

                error: function(jqXHR, exception) {

                    $(".modal-loader").hide();

                    if (jqXHR.status === 0) {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    } else if (jqXHR.status == 404) {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    } else if (jqXHR.status == KM_ERROR_CODE) {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    } else if (exception === 'parsererror') {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    } else if (exception === 'timeout') {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    } else if (exception === 'abort') {
                        notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                    }

                    // Add class alert danger to the message
                    $('.alert_custom', $('.horizontal-form')).addClass('alert-danger').show();
                    // Remove class alert warning if was left by previous validation
                    $('.alert_custom', $('.horizontal-form')).removeClass('alert-warning');
                    // Remove class alert success if was left by previous validation
                    $('.alert_custom', $('.horizontal-form')).removeClass('alert-success');
                    // Show error message
                    $('#kmg_admin_edit_group_message_modal').html(notice_message);

                } 

            }); 

            form.validate({

                doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
                errorElement: 'span', //default input error message container
                errorClass: 'help-block help-block-error', // default input error message class
                focusInvalid: false, // do not focus the last invalid input

                rules: {
                    
                    kmg_edit_group_type: { required: true },
                    kmg_edit_group_name: { required: true },
                    kmg_edit_group_address: { required: true }

                },

                messages: {

                    kmg_edit_group_type: "Compila il campo tipologia condominio!",
                    kmg_edit_group_name: "Compila il campo denominazione condominio!",
                    kmg_edit_group_address: "Compila il campo indirizzo condominio!"
                    
                },

                errorPlacement: function(error, element) { 
                    error.insertAfter(element);   
                },

                invalidHandler: function(event, validator) { //display error alert on form submit   
                    success.hide();
                    error.show();
                    App.scrollTo(error, -200);
                },

                highlight: function(element) { // hightlight error inputs
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },

                unhighlight: function(element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group

                },

                success: function(label) {
                    label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group

                },

                submitHandler: function(form) {

                    // Actions when form is submitted
                    $.ajax({
                      
                        type: form.method,
                        // Serialize form data and add also the ajax action
                        data: $(form).serialize()+"&ajax_action=kmg_admin_edit_group"+"&km_group_id="+km_group_id,
                        dataType: 'JSON',

                        success: function(response) {

                            if (response.notice_code == KM_WARNING_CODE) {

                                // Add class alert danger to the message
                                $('.alert_custom', $('.horizontal-form')).addClass('alert-danger').show();
                                // Remove class alert warning if was left by previous validation
                                $('.alert_custom', $('.horizontal-form')).removeClass('alert-warning');
                                // Remove class alert success if was left by previous validation
                                $('.alert_custom', $('.horizontal-form')).removeClass('alert-success');
                                // Show error message
                                $('#kmg_admin_edit_group_message_modal').html(response.notice_message);
                                // Scroll back to show error message
                                scrollTo(error, -200);

                            }

                            if (response.notice_code == KM_SUCCESS_CODE) {

                               // Hide modal so I can show sweetalert
                                $("#kmg_admin_edit_group_modal").modal("hide");
                                // Reset form fields
                                form.reset();

                                Swal.fire({
                                    title: response.notice_title,
                                    text: response.notice_message,
                                    type: response.notice_status
                                });

                                // Reload datatable to remove the row just deleted
                                $('#kmg_admin_group_list').DataTable().ajax.reload();

                            }

                            if (response.notice_code == KM_ERROR_CODE) {

                                // Hide modal so I can show sweetalert
                                $("#kmg_admin_edit_group_modal").modal("hide");
                                // Reset form fields
                                form.reset();

                                Swal.fire({
                                    title: response.notice_title,
                                    text: response.notice_message,
                                    type: response.notice_status
                                });

                            }

                        },

                        error: function(jqXHR, exception) {

                            if (jqXHR.status === 0) {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            } else if (jqXHR.status == 404) {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            } else if (jqXHR.status == 500) {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            } else if (exception === 'parsererror') {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            } else if (exception === 'timeout') {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            } else if (exception === 'abort') {
                                notice_message = 'Siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.';
                            }

                            // Hide modal so I can show sweetalert
                            $("#kmg_admin_edit_group_modal").modal("hide");
                            // Reset form fields
                            form.reset();

                            Swal.fire({
                                title: 'Operazione non riuscita!',
                                text: notice_message,
                                type: 'error'
                            });

                
                        }

                    });

           

                } 

            });

        });

    }

This is my css code:

.modal-loader {
    
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    margin-left: auto;
    margin-right: auto;
    background: url(/km-template/km-assets/layouts/img/loader/clock-loading.gif) center no-repeat #fff;
}

and in the modal body I have:

<div class='modal-loader' style='display: none;'></div>

Hi @vincekaribusana, does the beforeSend callback get called (just replace it with console.log or set a log point)? But as you’re not going to cancel the request here anyway, you might actually move the line that shows the loader right before the $.ajax() call and see if that works…

1 Like

Hi @m3g4p0p I tested it with chrome and works fine, so the problem is with Firefox. I’ve replaced the gif image with pure css animation and it works fine :slight_smile: thanks for you replay anyway

1 Like