bootstrap button loading with ajax

Question

i am trying to delete a record for mysql using ajax. everything is working fine. but i also want to add loading to the button when i click on trash button. below is my button link

<a href="#" id="delpost" data-id="'.$row['id'].'" class="btn btn-default pull-right" title="Delete"><i class="fa fa-trash-o"></i></a>

and below is my ajax

$(function() {
    $('body').on('click', '#delpost', function() {
        var del_id = $(this).attr("data-id");
        var info = 'id=' + del_id;
        var parent = $(this).closest('li');
        var btn = $(this);
        btn.button('loading');
        if (confirm("Sure you want to delete this Post? There is NO undo!")) {
            $.ajax({
                type: "POST",
                url: "/delete-post.php",
                data: info,
                beforeSend: function() {
                    parent.animate({
                        'backgroundColor': '#fb6c6c'
                    }, 300);
                },
                success: function() {
                    btn.button('reset');
                    parent.slideUp(300, function() {
                        parent.remove();
                    });
                }
            });
        }
        return false;
    });
});

Answer 1

This is simple jQuery solution and has nothing to do with bootstrap

You can add a hidden image of loading.gif which you can download from google and adjust its css so that it appears in same line as your delete link :

<a href="#" id="delpost" data-id="'.$row['id'].'" class="btn btn-default pull-right" title="Delete"><i class="fa fa-trash-o"></i></a> <img src="path/to/your/loading.gif" style="display:none;" alt="loading" id="loading" />

And modify your jquery code as below :

$(function() {
        $('body').on('click','#delpost',function(){
            var del_id = $(this).attr("data-id");
            var info = 'id=' + del_id;
            var parent = $(this).closest('li');
            var btn=$(this);
            btn.button('loading');
            if(confirm("Sure you want to delete this Post? There is NO undo!"))
            {
                $.ajax({
                    type: "POST",
                    url: "/delete-post.php",
                    data: info,
                    beforeSend: function() {
                        parent.animate({'backgroundColor':'#fb6c6c'},300);
                        $('#loading').show();//shows loading gif image
                    },
                    success: function(){
                        $('#loading').hide();//hides loading gif image
                        btn.button('reset');
                        parent.slideUp(300,function() {
                            parent.remove();
                        });
                    }
                });
            }
            return false;
        });
});