Display Loading image in Ajax loading page

Question

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?

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete — Rohit
– Rohit, Commented Jan 12, 2017 at 22:48

Sysix · Accepted Answer · 2017-01-12 22:39:23Z

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');
    }
});
});

answered Jan 12, 2017 at 22:39

Sysix

1,8341 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jomla Over a year ago

The class will be added once we click on button, but after complete process, the active class doesn't remove!!

Collectives™ on Stack Overflow

Display Loading image in Ajax loading page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related