jQuery ile Eklenen Nesneye Nasıl Erişebilirim?
Merhaba PT.
Ajax kullanarak bir form gönderiyorum ve cevap alana kadar bir preloader gösteriyorum. Ben bu preloader'ıda ajax gönderirken eklemek istiyorum.
Ancak ilk ajax çalıştığında preloader ekleniyor fakat çalışmıyor. Tekrar butona tıklandığında bir tane daha ekliyor ve önceki eklenen çalışıyor, sonradan eklenen çalışmıyor.
Ben istiyorum ki ilk tıklamada eklenen preloader çalışsın.
$.ajax({
beforeSend: function() {
$("body").prepend('<section class="preloader"></section>');
preloader.fadeIn(300);
},
success: function () {
preloader.fadeOut(300);
}
});
ilgili kodlarım bunlar.
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.middle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.bar {
width: 10px;
height: 70px;
background: #fff;
display: inline-block;
transform-origin: bottom center;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
/* box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
animation: loader 1.2s linear infinite;
}
.bar1 {
animation-delay: 0.1s;
}
.bar2 {
animation-delay: 0.2s;
}
.bar3 {
animation-delay: 0.3s;
}
.bar4 {
animation-delay: 0.4s;
}
.bar5 {
animation-delay: 0.5s;
}
.bar6 {
animation-delay: 0.6s;
}
.bar7 {
animation-delay: 0.7s;
}
.bar8 {
animation-delay: 0.8s;
}
@keyframes loader {
0% {
transform: scaleY(0.1);
background: ;
}
50% {
transform: scaleY(1);
background: yellowgreen;
}
100% {
transform: scaleY(0.1);
background: transparent;
}
}
</style>
</head>
<body>
<button class="btn btn-success">Başlat</button>
Sunucu tarafında 3 saniye bekletip işlem sona erecek
<div id="success"></div>
<div id="fail"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let loaderTemplate = `<div class="middle preloader">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
</div>`
$("button").on("click", function () {
$.ajax('ajax.php', {
method: "POST",
data: {
ajax: true
},
beforeSend() {
$("body").prepend(loaderTemplate)
}
}).then(success => {
$("#success").html('Sonuç başarılı')
}, fail => {
$("#fail").html('Sonuç başarısız, sunucu hatası')
}).always(() => {
$(".preloader").remove()
})
})
</script>
</body>
</html>
ajax.php
if (isset($_POST['ajax'])) {
sleep(3);
}