Javascriptte Post edip buton değiştirme

06-10-2017, 13:35:09

javascript ile sayfayı yenilemden favorilerime ekle butonu gönderiyorum buton ilk bastığımda çalışıyor ama ikinci bastığımda hata veriyor sayfayı yenilediğimde işlem yapıyor nedenini bulamadım. kodum aşağıdaki şekilde.
Arkadaşlar Kaç gündür bu hata ile uğraşıyorum yardım lütfen.

    <script type="text/javascript">
        $(document).ready(function () {
            $('#FavoriButon').click(function(){
                var soru_id = $(this).attr('data-id');
                $.ajax({
                    url: 'soru-detay.php',
                    type: 'post',
                    async: false,
                    data: {
                        'favoriad': 1,
                        'soru_id': soru_id
                    },
                    success: function(){
                        $("#FavoriButon").remove();
                        $(".resimserit").append("<button type='submit' class='btn btn-warning btn-xs' id='FavoriButonex' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerimden Çıkar</button>");
                    }
                });
            });
            $('#FavoriButonex').click(function(){ 
                var soru_id = $(this).attr('data-id');
                $.ajax({
                    url: 'soru-detay.php',
                    type: 'post',
                    async: false,
                    data: {
                        'favoriex': 1,
                        'soru_id': soru_id
                    },
                    success: function(){
                        $("#FavoriButonex").remove();
                        $(".resimserit").append("<button type='submit' class='btn btn-success btn-xs' id='FavoriButon' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerime Ekle</button>");
                    }
                });
            });
        });
    </script>

Hata : [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ all.js:8556

06-10-2017, 13:50:51

#2

~~Gtaturk~~

Üyeliği durduruldu

kodları inceleyemedim ama #FavoriButon'da ajax çalıştıktan sonra bunu siliyorsunuz galiba, daha sonra kodla sayfaya yeni bir #FavoriButon ekleniyor. Yeni eklenen buton click olayında çalışmaz çünkü ilk başta ona bi etkileşim atanmamıştı (id si aynı olsa da o buton artık ilk baştaki buton değil). Bu sorundan kurtulmak için $.click fonksiyonu yerine $.on (eski jquery versiyonunda $.live) kullanmanız gerek

edit: yeni fark ettim ajax requestlerini asenkron yerine senkron yapmanızın özel bir nedeni var mı? yoksa async:false yerine async:true yapabilirsiniz ya ada o satırı komple silebilirsiniz

06-10-2017, 16:49:34

mpoy8

Hocam,
Şöyle durum;

        $('#FavoriButonex').click(function(){
            var soru_id = $(this).attr('data-id');
            $.ajax({
                url: 'soru-detay.php',
                type: 'post',
                async: false,
                data: {
                    'favoriex': 1,
                    'soru_id': soru_id
                },
                success: function(){
                    $("#FavoriButonex").remove();
                    $(".resimserit").append("<button type='submit' class='btn btn-success btn-xs' id='FavoriButon' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerime Ekle</button>");

En dış fonksiyonda document.ready.function var. Yani döküman hazır olduğu zaman çalışmaya hazır fonksiyonlar burada demiş oluyorsunuz. ikinci butonda dinamik olarak bir buton oluşturuyorsunuz, o buton sayfa yüklenirken aslında yoktu yani document.ready.function fonksiyonu ilk çalıştığı zaman.
Ama sayfayı tekrar yükleyince döküman yeniden yüklendiği için çalışacaktır.
Bu durumda jquery live events kullanmanız lazım. Yani sonradan oluşturulan elemanları bulmak için şu yöntemi kullanabilirisiniz.

        $(document).on('click', 'button #FavoriButonex', function(){
            var soru_id = $(this).attr('data-id');
            $.ajax({
                url: 'soru-detay.php',
                type: 'post',
                async: false,
                data: {
                    'favoriex': 1,
                    'soru_id': soru_id
                },
                success: function(){
                    $("#FavoriButonex").remove();
                    $(".resimserit").append("<button type='submit' class='btn btn-success btn-xs' id='FavoriButon' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerime Ekle</button>");

Bu ne anlama geliyor.

$(document).on('click', 'button #FavoriButonex', function(){
});

Dökümana yani sayfaya tıklandığı zaman (sayfa mutlaka yüklenmiş olacağı için çalışır.),
döküman içerisinde button tagı içeren html elemanlarını bul ve bunlardan id si favoriButonex olana tıklanmış gibi işlem yap.
yani oradaki .click(function) yerine on('click', 'seçici', function)
kullanırsanız sonradan oluşturulan elemanlar için event tetikleme sorununuz ortadan kalkar.

06-10-2017, 18:27:10

#4

Adalente

mpoy8 adlı üyeden alıntı: mesajı görüntüle

Hocam,
Şöyle durum;
$('#FavoriButonex').click(function(){ var soru_id = $(this).attr('data-id'); $.ajax({ url: 'soru-detay.php', type: 'post', async: false, data: { 'favoriex': 1, 'soru_id': soru_id }, success: function(){ $("#FavoriButonex").remove(); $(".resimserit").append("<button type='submit' class='btn btn-success btn-xs' id='FavoriButon' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerime Ekle</button>");
En dış fonksiyonda document.ready.function var. Yani döküman hazır olduğu zaman çalışmaya hazır fonksiyonlar burada demiş oluyorsunuz. ikinci butonda dinamik olarak bir buton oluşturuyorsunuz, o buton sayfa yüklenirken aslında yoktu yani document.ready.function fonksiyonu ilk çalıştığı zaman.
Ama sayfayı tekrar yükleyince döküman yeniden yüklendiği için çalışacaktır.
Bu durumda jquery live events kullanmanız lazım. Yani sonradan oluşturulan elemanları bulmak için şu yöntemi kullanabilirisiniz.
$(document).on('click', 'button #FavoriButonex', function(){ var soru_id = $(this).attr('data-id'); $.ajax({ url: 'soru-detay.php', type: 'post', async: false, data: { 'favoriex': 1, 'soru_id': soru_id }, success: function(){ $("#FavoriButonex").remove(); $(".resimserit").append("<button type='submit' class='btn btn-success btn-xs' id='FavoriButon' data-id='"+soru_id+"'><i class='fa fa-heart-o'></i> Fovorilerime Ekle</button>");
Bu ne anlama geliyor.
$(document).on('click', 'button #FavoriButonex', function(){ });
Dökümana yani sayfaya tıklandığı zaman (sayfa mutlaka yüklenmiş olacağı için çalışır.),
döküman içerisinde button tagı içeren html elemanlarını bul ve bunlardan id si favoriButonex olana tıklanmış gibi işlem yap.
yani oradaki .click(function) yerine on('click', 'seçici', function)
kullanırsanız sonradan oluşturulan elemanlar için event tetikleme sorununuz ortadan kalkar.

Malesef Hocam verdiğiniz kod ile çalıştıramadım bu sefer hiç tepki vermedi.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 18:27:10 -->-> Daha önceki mesaj 17:45:28 --

Gtaturk adlı üyeden alıntı: mesajı görüntüle

kodları inceleyemedim ama #FavoriButon'da ajax çalıştıktan sonra bunu siliyorsunuz galiba, daha sonra kodla sayfaya yeni bir #FavoriButon ekleniyor. Yeni eklenen buton click olayında çalışmaz çünkü ilk başta ona bi etkileşim atanmamıştı (id si aynı olsa da o buton artık ilk baştaki buton değil). Bu sorundan kurtulmak için $.click fonksiyonu yerine $.on (eski jquery versiyonunda $.live) kullanmanız gerek

edit: yeni fark ettim ajax requestlerini asenkron yerine senkron yapmanızın özel bir nedeni var mı? yoksa async:false yerine async:true yapabilirsiniz ya ada o satırı komple silebilirsiniz

denedim ama pek fark etmedi
07-10-2017, 01:16:17

#5

sesusera

@Adalente; arkadaşın yukarıda ki mesajda verdiği kod doğru boşluk karakteri var seçiçide ondan çalışmamış olabilir ancak dediği gibi kullanmanız gerekmekte.

$('#FavoriButonex').click(function(){
yerine
$(document).on('click' , '#FavoriButonEx' , function(){
// ajax işlemleri
});

Bu şekilde kullandığınızda sorun yaşamazsınız döküman yüklendikten sonra eklendiği için tıklama hareketini yakalayamıyor.

Eğer yine çalışmaz ise tarayıcınızın konsol bölümünü açın javascript hatası var ise buraya yapıştırın , kolay gelsin.
09-10-2017, 09:51:39

#6

Adalente

sesusera adlı üyeden alıntı: mesajı görüntüle

@Adalente; arkadaşın yukarıda ki mesajda verdiği kod doğru boşluk karakteri var seçiçide ondan çalışmamış olabilir ancak dediği gibi kullanmanız gerekmekte.

$('#FavoriButonex').click(function(){
yerine
$(document).on('click' , '#FavoriButonEx' , function(){
// ajax işlemleri
});

Bu şekilde kullandığınızda sorun yaşamazsınız döküman yüklendikten sonra eklendiği için tıklama hareketini yakalayamıyor.

Eğer yine çalışmaz ise tarayıcınızın konsol bölümünü açın javascript hatası var ise buraya yapıştırın , kolay gelsin.

Hata vermiyor ama o şekilde hiç işlem yapmıyor
09-10-2017, 13:02:37

#7

tyesil

Misafir
Arkadaşlar söylemişler ama neden bu işi bu kadar zorlaştırdığınızı anlayamadım açıkçası
onclick dediğiniz olayı doğrudan butonun üstüne yerleştirseniz bu sorun çözülecek, ki zaten neden bunu html yerine js ile kasıyorsunuz ?
```
<button onclick="fonksiyonAdi()" ... >
```
```
function fonksiyonAdi(){ ... }
```
bu kadar basit böylece sayfa hazır kodu olarak "..ready.." kodunada ihtiyacınız olmaz.
Ayrıca bu sayede ister önceden eklenmiş olsun ister sonradan eklenmiş olsun sayfanızdaki js kodlarının arasında ilgili fonksiyon varsa zaten çalışacaktır kodunuz
Adalente bunu beğendi.

1 kişi bunu beğendi.
09-10-2017, 13:18:39

#8

Adalente

Misafir adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar söylemişler ama neden bu işi bu kadar zorlaştırdığınızı anlayamadım açıkçası
onclick dediğiniz olayı doğrudan butonun üstüne yerleştirseniz bu sorun çözülecek, ki zaten neden bunu html yerine js ile kasıyorsunuz ?

<button onclick="fonksiyonAdi()" ... >
function fonksiyonAdi(){ ... }
bu kadar basit böylece sayfa hazır kodu olarak "..ready.." kodunada ihtiyacınız olmaz.
Ayrıca bu sayede ister önceden eklenmiş olsun ister sonradan eklenmiş olsun sayfanızdaki js kodlarının arasında ilgili fonksiyon varsa zaten çalışacaktır kodunuz

Ben daha yeniyim ilk defa yapıyorum bu kod işini ve tavsiye üzerine bu kodu buldum ve videolar izleyerek birşeyler yapmaya çalışıyorum herkes farklı şey söyledi bağlanıp bakanda oldu yapamadı ben 3 - 4 güngür araştırıyorum ama internettede kaynak bulamadım yada aradıklarım eski yazılmış kodlardı.
09-10-2017, 13:29:36

#9

tyesil

Misafir

https://www.w3schools.com/jsref/tryi...yjsref_onclick
Buradan ne demek istediğimi kendin görüp uygulayabilirsin çok basit şeyler bunlar.
Ayrıca sıfırdan başlıyorsun öncesinde W3School sitesindeki JS ye ayit olan kısmı sayfayı türkçeye çevirip dene gör sayfaları ile beraber görebilirsin.
Bu söylediklerimin yeni başlamayla değil mantık ve algoritma ile alakası var.
Omlet yapmanın binlerce versiyonu olduğu gibi benim verdiğim örnekte şunu söylüyorum.
Siz => Nesne oluşturulsun, sonra biz sayfayı tarayıp bunu bulup tıklanıyorsa çalıştırılacak kodları yazalım
Ben => Nesneyi oluştururken tıklama olayında hangi fonksiyonu çalıştıracaksa biz söyleyelim, zaten fonksiyonu yazmışız oda çağrılmayı beklesin
Demem o ki programlama öğrenmek ile algoritma öğrenmek farklıdır.
Başkalarının yazdığı kodları bulup incelerseniz daha iyi anlarsanız.