jQuery ile Eklenen Nesneye Nasıl Erişebilirim?

Anonim 745 gün önce

256 defa görüntülendi

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.

jquery

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (4)

abdullahx

745 gün önce

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

#011431

redline

745 gün önce

@abdullahx hocam halihazırda bulundurabilirim fakat bu yöntem daha çok ilgimi çekiyor. İlerleyen zamanda aynı şekilde popuplar, modallar da yapacağım. Dediğiniz kısmen doğru ilk çağrıda dom'da olmadığı için olmuyor sanırım fakat bunun bir yöntemi olmalı.

@gokcin hocam yanlış anladınız sanırım. Ajax işlemi başmadan önce fadeIn, bittikten sonra fadeOut yapmak istiyorum.

#011429

gokcin

745 gün önce

    
    $.ajax({
        type: "",
        url: "",
        dataType: "json",
        data:"",
        success: function(karenet) { 
            //cevap kodların
        },
        beforeSend: function (){
            $("body").prepend('<section class="preloader"></section>');
        },
        complete: function () {
            preloader.fadeIn(300);
        }
    })

Bu şekilde kullana bilirsin.
Öncelikle ajax'ın çalıştığı anda beforeSend işleme gelir, eğer ajax işini bitirdiğinde ise, complate işlemi devreye girer.

#011428

abdullahx

745 gün önce

preloader.fadeIn(300) yazarak muhtemelen ilk ajax çağrısında dom da olmayan bir ögeyi seçtiğiniz için çalışmıyor. İkinci çağrıda bu yazdığım koddaki preloader değişkeninin nerede oluşturulduğu önemli.
Ayriyeten benim bildiğim preloader sayfada halihazırda bulunur ve duruma göre gösterilip gizlenir, neden sonradan ekleme ihtiyacı duyuyorsunuz?

#011427