用ajax加载bootstrap按钮

Question

我试图使用ajax删除mysql的记录。 一切都很好。 但我也想在点击垃圾按钮时添加加载到按钮。 下面是我的按钮链接

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

以下是我的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

这是简单的jQuery解决方案，与bootstrap无关

您可以添加一个您可以从谷歌下载的loaded.gif的隐藏图像，并调整其CSS，使其与删除链接显示在同一行：

<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" />

并修改您的jquery代码如下：

$(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;
        });
});