Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

Ajax Eleman Seçememe Sorunu

Merhaba arkadaşlar.

Ajax ile listeleme işlemini yaptım.

Şimdi ise düzenleme ve silme işlemini yapmak istiyorum.


Ancak şöyle bir sorun var.


Ajax ile listelenen kısımdaki düzenle ve sil butonuna tıklayınca alert işlemi vs. çalışmıyor. Ama butonu başka bir kısımda deneyince çalışıyor.


Bunun çözümü nedir?


api.php

<?php

$listele = $db->prepare("SELECT * FROM ziyaretci_defteri");
$listele->execute();
$run = $listele->fetchAll(PDO::FETCH_ASSOC);
$i = 1;

echo '<table class="list" border="1" cellspacing="0">
	<tr class="listhead">
		<td>#</td><td>Ad</td><td>Soyad</td><td>E-posta</td><td>Mesaj</td><td>Tarih</td><td>Durum</td><td>İşlemler</td>
	</tr>';
	
	foreach($run as $r){
		echo '<tr class="listcontent">
			<td>'.$i++.'</td><td>'.$r["ad"].'</td><td>'.$r["soyad"].'</td><td>'.$r["eposta"].'</td><td>'.$r["mesaj"].'</td><td>'.$r["tarih"].'</td><td>'.($r["durum"] == 1 ? "Aktif" : null).'</td>
			<td>
				<button name="duzenle" id="'.$r["id"].'">Düzenle</button>
                <button name="sil" id="'.$r["id"].'">Sil</button>
			</td>
		</tr>';
	}

echo '</table>';


?>


main.js

$(document).ready(function(){
    
    // Veri Düzenleme
    $("button[name='duzenle']").click(function(){
        var id = $(this).attr("id");
        alert("merhaba"+id);
    });
    
    
    // Veriçekme Fonksiyonu
    function vericek(){
        $.ajax({
            url: "api.php",
            type: "POST",
            success: function(result)
            {
                $(".liste").html(result);
            }
        });
    }
    
    vericek();
    
})
2

Cevaplar (2)

İşlem devam ediyor, lütfen bekleyin..
Emre KILIÇ
@adorratm
4 ay önce [Güncellendi]
// Veri Düzenleme
    $("button[name='duzenle']").click(function(){
        var id = $(this).attr("id");
        alert("merhaba"+id);
    });

kodunuzu çağırdığınız ajax sayfası içerisinde php taglarının altında script tag ı arasına yazdığınızda sorun düzelecektir kanaatindeyim. Ben de genelde dışarıdan çağırdığım ajax probleminde aynı yöntemi uyguluyorum farklı bir yöntem varsa sadece tek bir javascript dosyasıyla bu işlemler gerçekleştirilebiliniyorsa bilgilendiren olursa sevinirim.

Cevapla @BlueCode4 ay önce
@adorratm, evet dediğiniz şekilde yapınca bir dönüt aldım. Ancak anlamadığım bir nokta var. Ben şimdi düzenleme işlemi için ajax kodlarını burada mı yazmam gerekiyor?
Cevapla @adorratm4 ay önce
@BlueCode, şöyle ki düzenleme işlemi yaptığınız kodları bir javascript fonksiyonunun içerisinde yazdığınızda sadece api.php sayfanıza fonksiyonu butona tıklandığında çalıştırmanız yeterli olacaktır diye düşünüyorum. Butona tıkladığınızda butondan bir id değeri gönderiyorsanız fonksiyona değişken tanımlayıp o id değişkenini api.php de atıyorum vericek(id); şeklinde göndermeniz yeterli olacaktır
Cevapla @adorratm4 ay önce
@BlueCode, kısacası atmış olduğunuz kodları incelediğim kadarıyla api.php de script tagları arasında vericek(); fonksiyonunu bir daha çağıracaksınız.
Cevapla @BlueCode4 ay önce
@adorratm, dediğiniz gibi api.php'de script tagı arasında vericek(id); denedim. Ancak bu defada vericek is not defined hatası veriyor.
İşlem devam ediyor, lütfen bekleyin..
Atakan Ünal
@AtakanButik
4 ay önce [Güncellendi]

JQuery kodlarınızda bir problem olduğunu düşünmüyorum. Kanaatime göre problem api.php dosyanızda.


$db değişkeninizin PDO sınıfınıza bağlı olduğuna ve PDO sınıfınızın api.php dosyanızda require edildiğe emin olun.


Html kodlarınızda "liste" sınıfı atanmış bir element olduğuna ve birden fazla olmadığına emin olun (tavsiyem sınıf yerine id kullanın).


kullanmış olduğunuz $i++ değeri $i = $i + 1; değerine denk gelir ve bunu echo ile yazdıramazsınız. Şu şekilde

kullanabilirsiniz:

<?php

$i = 1;

foreach($run as $r){

  echo $i;
  $i++;
    
}
    
?>


Ve son olarak tavsiyem ajax servisini kullanacaksanız değerlerinizi json formatında çekin ve main.js dosyanızda bu formatı açıp ilgili alana yazdırın.



Added:



Üzgünüm, ben problemi yanlış anlamışım. Sorun şurada çıkıyor, script kodlarının içerisinde yazdıkların html çıktılarının ilk hali için geçerli olacaktır ama ajax isteklerin bu html çıktısına bir ek bölüm ekler. Çözüm basit, ajax bu ek html satırlarını düzene sokman için "success" parametresini içerisinde bulunduruyor. 


// Veri Düzenleme
    $("button[name='duzenle']").click(function(){
        var id = $(this).attr("id");
        alert("merhaba"+id);
    });


Bu kodlarını ajax ın success methoduna eklersen problem çözülecektir. Sisteme bu isteğin, post işleminde sonra olduğunu bildirmiş olacaksın.


    function vericek(){
        $.ajax({
            url: "api.php",
            type: "POST",
            success: function(result)
            {
                $(".liste").html(result);
                $("button[name='duzenle']").click(function(){
                  var id = $(this).attr("id");
                  alert("merhaba"+id);
                });
            }
        });
    }


verilecek fonksyonunu bu şekilde değiştirirsen sorun çözülmüş olacak. Belki $("table.list").on("load", () => {}); ile falan da fixlenebilir ama emin değilim. Bana bu yöntem daha yararlı geliyor.



Cevapla @BlueCode4 ay önce
@AtakanButik, pdo dosyası dahil edilmiş durumda ve listeleme kısmında da bir sorun bulunmuyor. Json tarafına da çalışacağım önce bu tarafını öğrenmek istedim.
Cevapla @AtakanButik4 ay önce
Sorunu yanlış anlamışım sanırım. Hata çözümünü mesaja ekledim.
İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın

Yabancı Dizi Arşivi