引導按鈕加載ajax

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解決方案，已經無關引導

您可以添加一個隱藏的圖像loading.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; 
     }); 
});