Ard Arda İstek Gönderilen Ajax'ta Problem

demo 1261 gün önce

660 defa görüntülendi

Form'un her change eventi için bir ajax çağırıyorum. Ajaxtan dönen verinin durumuna göre Form'daki "SUBMIT" butonunu ya .hide() ile gizliyorum, ya da .show() ile gösteriyorum.

Ancak bazen şöyle bir senaryo gerçekleşiyor; Örneğin checkbox'a hızlı hızlı basıldığında, selectbox'taki verileri hızlı hızlı değiştirildiğinde kod parçası sapıtıyor.

Örneğin: kullanıcı olması gereken "A durumu" şeklinde formu doldurduktan ve Submit.show() olduktan hemen sonra; Hatalı olan "B durumu" şeklinde formu değiştirdiği zaman buton hala .Show() olarak kalmış oluyor...

Örnek kodları şu şekilde gösterebilirim:

$("#form").on('change', function (e) {
$("#btnSubmit").hide();
if (mevcutDurum > hedeflenenDurum) {
    $("#bilgi").text("Hedeflenen durum, mevcut durumdan alçak olamaz!");
    $("#bilgilendirme").show();
    $("#btnSubmit").hide();
    }
}
else {
    let form = $(this);
    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        beforeSend: function () {
            $("#btnSubmit").hide();
        },
        success: function (data) {
            $("#btnSubmit").show();
        },
    });
}

Özetle: Form kurallara uygunsa Submit.show(), hatalıysa Bilgilendirme yazısı gösterilip Submit.hide() olmalıyken;
Hem uyarı görünüyor, hem de buton Submit olarak kalmış oluyor...

Görseli inceleyiniz:

Nasıl çözebilirim bunu?

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)

demo

1260 gün önce

@kargasal1982 aslında söylediğin mantığa benzer olarak zaten:
1- form.change event'i tetiklendiği anda butonu hide yapıyorum,
2- ajax beforeSend kısmında yine butonu .hide yapıyorum

butonu sadece ajax'ın success function'ı tetiklendiği anda .show ediyorum...

Senin bahsettiğin senaryoyu uygularsam; buton'da olduğu gibi yine bir önceki ajax ile çakışma olacak. Mesela: Hem buton.show() olmuş olacak, hem de loader.show() gibi...

#005437

kargasa1982

1261 gün önce

bu durumda aklıma gelen en basit yöntem ya tüm sayfayı yada formun üzerine kaplayan bir loader yapmak ve ajax sorgusundan cevap dönene kadar onu ekranda tutma, böylelikle ilk event olduğunda loader ekranı/formu kaplar success/error durumlarında loader kalkar

#005430

demo

1261 gün önce

Tayfun Hocam şöyle bir durum var yalnız; ajax sorgusu kesinlikle göndermem gerekiyor çünkü formdan gelen verileri hem DB'de; hem de kullanıcı taraflı görünmemesi gereken veriler ile birlikte validate ediyorum. Yani sadece javascript ile ön tarafta if/else bloğuna sokmaktan öte arka planda da yapılan işlemler oluyor; dolayısı ile ajax'a ihtiyaç duymaktayım. Form'da ajax'ın çağırılması için timeout ile 3 saniyelik bir değer ataması yaptım ama yine de sorunu tam anlamıyla çözmedi bu.

#005415

tayfunerbilen

1261 gün önce

bu yaklaşım bana çok doğru gelmiyor. her işlem için ajax çalıştırmak yerine bu kontrolleri client-side kontrol etmek çok daha mantıklı.

nasıl yapabilirim dersen zamanında çektiğim 2 video var, bunlardan birisi mutlaka bu işini çözecektir, incelemeni öneririm:

https://www.youtube.com/watch?v=Q4BS0vzU13g
https://www.youtube.com/watch?v=q9cV7Rfrlqc

#005414