Hocam Ellerine sağlık üşenmeden yardımcı olmak için yazmıssın ellerin dert görmesin valla ama ben sorunu dakikalar önce çözdüm şans eseri çözdüm butona her bastığımda post işlemi başladığı için sayfa refresh atıyordu ve div class ile bir gif img ekledim ama css'de display:none; ayarladım sayfa ilk açıldığında görünmüyor ve js ile butona basınca event olarak css siliyor img görünmeye başlıyor o arada sayfa verileri çekmeye başlıyor ve veriler çekildiğinde f5 atıyor ve yine display:none; oluyor aslında tam istediğim gibi oldu şans eseri uğraşıp denerken başka arkadaşlar sorun yaşar diye kodları bırakıyorum böyle çözebilirsiniz
<div id="gizle" style="display:none;">
<div class="text-center"><img src="https://www.r10.net/images/ajax-loader.gif" alt="" width="200" height="150"></div>
</div>
<script >
var btnGizle=document.getElementById("btnGizle");
btnGizle.onclick=function(){
//display özelliği none yapılarak gizleme işlemi yapılır.
document.getElementById("gizle").style.display="";
}
</script>
İstediğinizi yanlış anlamadıysam şöyle bir şey yapmanız daha doğru olur.
$("#formid").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function() {
// Loading GIF show or append
},
success: function(data)
{
$("#result").html(data);
// Loading GIF hide or remove
}
});
});Ajax kullanmıyorsunuz sanırım, direkt form POST submit yapılıyor, sayfa refresh atması bu yüzden. e.preventDefault(); ile bu engellenip ajax ile istek yollanıyor. #formid ve #result düzenleyin. beforeSend ve success yerini kendinize göre jQuery ile Loading GIF'ini kontrol edebilirsiniz.