0

I've a button that when we click on it, database will be updated and then result will show on page, based on upload.php (( this section is working well, I have no problem with this.))

<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" style="text-decoration:none">

<kk><!--show updated columns information here--></kk>

$(document).ready(function() {
$("BB").click(function() {
    var Id = jQuery(this).attr("id");
    $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
        url : "upload.php",
        success: function(response) {
            if(response) {
                $('kk').append(response);
                $('#modal_'+Id).modal('show');
                $(document).on('hidden.bs.modal', modal_id, function (event) {
                    $(this).remove();
                });
            } else {
                alert('Error');
            }
        }
    });
});
});

I want to add a loading image when the upload.php is under processing, and once the page loaded, then loading image will be disappeared and my result will be shown.

How can I add loafing image into above JavaScript while page is loading?

Vemonus
  • 860
  • 1
  • 17
  • 26
Jomla
  • 83
  • 1
  • 9
  • Answer could be here: http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – Sgnl Jan 12 '17 at 22:35
  • [http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete) – Rohit Jan 12 '17 at 22:48

1 Answers1

1

Style A Loader and make a extra class for display it. I Called my class active. On Click you show the loader and on complete you hide it. Use the complete-Callback, because the request can be failing.

<div id="loader"></div>

$("BB").click(function() {
var Id = jQuery(this).attr("id");
$('#loader').addClass('active');
$.ajax({
    type: 'POST',
    data: {
        'modal_id' : Id,
    },
    url : "upload.php",
    success: function(response) {
        if(response) {
            $('kk').append(response);
            $('#modal_'+Id).modal('show');
            $(document).on('hidden.bs.modal', modal_id, function (event) {
                $(this).remove();
            });
        } else {
            alert('Error');
        }
    },
    complete: function() {
        $('#loader').removeClass('active');
    }
});
});
Sysix
  • 834
  • 10
  • 19
  • The class will be added once we click on button, but after complete process, the active class doesn't remove!! – Jomla Jan 12 '17 at 23:51