GetElementByİd İle tablodan veri çekme

23-11-2018, 13:20:41

Merhaba Arkadaşlar

Ben bir tablodan veri çekip bunu modal ile ekranda yazdırmak istiyorum.Örn;

Detayları Göstere tıklayınca Modal açılacak,ve o modalda yalnızca seçilen id'nin bilgileri gösterilecek.

Umarım düzgün anlatabilmişimdir?

23-11-2018, 17:39:37

#2

sehzadem

Mantık şu şekildedir;

Her satırın id özelliğine çekmek istediğiniz id yi yazdırırsınız, jquery ile satırlara tıklanınca kontrol edip hangi satır tıklanmış ise o satırda ki id değerini alırsınız. Yine jquery ile aldığınız id değerini post edersiniz, gelen cevabı modal içine yazdırarak gösterirsiniz.

İyi çalışmalar

23-11-2018, 18:30:07

#3

gelir_ortagim

hocam örnek verme şansınız varmı?Teşekkürler...

23-11-2018, 19:06:42

#4

sehzadem

<table>
<tr>
<td>mark</td>
<td>otto</td>
<td><a href="#" id="1" class="item">detay</a></td>
</tr>
<tr>
<td>jacop</td>
<td>thornton</td>
<td><a href="#" id="2" class="item">detay</a></td>
</tr>
<tr>
<td>larry</td>
<td>the bird</td>
<td><a href="#" id="3" class="item">detay</a></td>
</tr>
</table>
<script>
$(document).ready(function(){
$('a.item').click(function () {
var id = $(this).attr("id");
$.ajax({
url: "test.php?id="+id,
success: function (data) {
alert(data); // bu kısımda gelen değeri modal içine yazdıracaksınız.
}
});
})
});
</script>

kodlarınızın üst kısmında jquery kütüphanesini dahil edeceksiniz. Bundan sonrasını kendinize göre düzenleyebilirsiniz.

24-11-2018, 23:07:03

#5

gelir_ortagim

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

<table>
<tr>
<td>mark</td>
<td>otto</td>
<td><a href="#" id="1" class="item">detay</a></td>
</tr>
<tr>
<td>jacop</td>
<td>thornton</td>
<td><a href="#" id="2" class="item">detay</a></td>
</tr>
<tr>
<td>larry</td>
<td>the bird</td>
<td><a href="#" id="3" class="item">detay</a></td>
</tr>
</table>
<script>
$(document).ready(function(){
$('a.item').click(function () {
var id = $(this).attr("id");
$.ajax({
url: "test.php?id="+id,
success: function (data) {
alert(data); // bu kısımda gelen değeri modal içine yazdıracaksınız.
}
});
})
});
</script>

kodlarınızın üst kısmında jquery kütüphanesini dahil edeceksiniz. Bundan sonrasını kendinize göre düzenleyebilirsiniz.

Dediğiniz gibi yaptım hocam.fakat ben id yi php değişkenine atamak istiyorum.Yani modal içinde yalnızca o değilşkenin çektiği veriler gözükecek.

25-11-2018, 10:06:58

#6

sehzadem

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

Dediğiniz gibi yaptım hocam.fakat ben id yi php değişkenine atamak istiyorum.Yani modal içinde yalnızca o değilşkenin çektiği veriler gözükecek.

test.php sizin php tarafında işlem yapacağınız dosya.

$id = $_GET['id'];

şeklinde id değişkenini alırsınız, sorgunuzu yaparsınız, sonrasında elde ettiğiniz çıktıyı yazdırırsınız. Sonrasında ise ilk verdiğim kodda alert(data); satırındaki data değişkeni test.php dosyasından dönen değerdir, bu değeri modal içine yazdıracaksınız. Basit olarak

$('div.modal').html(data);

şeklinde kullanırsınız.

25-11-2018, 11:32:05

#7

gelir_ortagim

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

test.php sizin php tarafında işlem yapacağınız dosya.

$id = $_GET['id'];

şeklinde id değişkenini alırsınız, sorgunuzu yaparsınız, sonrasında elde ettiğiniz çıktıyı yazdırırsınız. Sonrasında ise ilk verdiğim kodda alert(data); satırındaki data değişkeni test.php dosyasından dönen değerdir, bu değeri modal içine yazdıracaksınız. Basit olarak

$('div.modal').html(data);

şeklinde kullanırsınız.

Yardımlarınız için teşekkürler hocam.Fakat modal içinde yazdırmıyor.Alert de tam istediğim gibi yazdırıyor.Modal da nasıl yazdırabilirim?

25-11-2018, 15:33:09

#8

sehzadem

Gelen data değerini $("modal id si yada class ı").text(data); şeklinde denediniz mi ?

27-11-2018, 12:39:50

#9

gelir_ortagim

Hocam bu şekilde deniyorum.Yinede sonuç alamadım.

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

Gelen data değerini $("modal id si yada class ı").text(data); şeklinde denediniz mi ?

//Bunlar script kodları
<script>
$(document).ready(function(){
$('a.item').click(function () {
var id = $(this).attr("id");
$.ajax({
url: "urun-detay?id="+id,
success: function (data) {
$("modal-fade").text(data);
}
});
})
});
</script>
//Bunlar modal
<div class="modal fade" id="12" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>