"How to insert animated gif icon a button, while ajax progress!"
Bootstrap 3.0.0 Snippet by muhittinbudak

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-push-1"><center><h2 class="well" id="izleyici">3</h2></center></div>
</div>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label for="input" class="col-sm-2 control-label">Adı</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formad" placeholder="isim giriniz." value="Muhittin" >
</div></div>
<div class="form-group">
<label for="input" class="col-sm-2 control-label">Soyadı</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formsoyad" placeholder="soyisim giriniz" value="BUDAK" >
</div></div>
<div class="form-group"><div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default bunukaydet"> Save</button>
</div></div>
</form>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
function isleniyor(bubu, onceki)
{
// İŞLENİYOR GİFİNİ BUTONA EKLİYOR..
bubu.empty();
bubu.html('<img src="http://www.bba-reman.com/images/loader.gif" /> ' + onceki + " Progressing...");
bubu.prop('disabled', true); // this button disabled!
}
function Saybakalim(bubu, onceki){
var n = 3; // n : saniyeyi gösteriyor
setTimeout(geriSayim,1000);
function geriSayim(){
n--;
if(n > 0){
setTimeout(geriSayim, 1000);
} else {
bubu.html(onceki);
bubu.prop('disabled', false);// this button enabled!
}
$("#izleyici").html(n);
}
}
$(".bunukaydet").click(function(){
$("#izleyici").html("3");
var onceki = $(this).html();
isleniyor($(this), onceki);
Saybakalim($(this), onceki);
return false;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: