ブートストラップボタンを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のソリューションであり、あなたが隠された画像を追加することができ、ブートストラップ

とは何の関係もありませんあなたがgoogleからダウンロードしてあなたの削除リンクと同じ行に表示されるようにそのCSSを調整することができますloading.gifの：

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