Modal data target ve id tanımlama

rephp7 1245 gün önce

825 defa görüntülendi

<td><?php
echo mb_substr(stripslashes($yazilar[$i]["alan1"]), 0, 150, "UTF-8") . " <br>..."; ?><br>
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#editor<?= $yazilar[$i]["alan1"]; ?>">
<i class="far fa-eye"></button></td>
</td>

<td><?php
echo mb_substr(stripslashes($yazilar[$i]["alan2"]), 0, 150, "UTF-8") . " <br>..."; ?><br>
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#danisman<?= $yazilar[$i]["yontem2"]; ?>">
<i class="far fa-eye"></button></td>
</td>

Yukardaki gibi önizlemesini görmek istediğim alanlara birer buton tanımladım ve data-target ile aşağıdaki modal ın id alanını aynı yapıp modal içinde göstertiyorum.

 <!-- modal -->
  <div class="modal fade" id="editor<?= $yazilar[$i]["alan1"]; ?>">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Önizleme Penceresi</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ///veri çek php kodu ///
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
<!-- /.modal -->

bu kısımı nasıl düzeltmeliyim ki
data-toggle="modal" data-target="
her modal-target için ayrı birer modal yazmayayım
<div class="modal fade" id="

Soru hatalı mı? 👎

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

Spam olarak işaretle

Cevaplar (1)

muthbeats

1245 gün önce

Merhabalar kullanıp kullanmadığını bilmiyorum fakat sana jquery ile yardımcı olabilirim.

öncelikle butonlardan

data-toggle="modal" ve data-target=""

kısımlarını kaldırmalısın.
sonrasında ise bütün butonlara bir class atayabilirsin örneğin "showModalBtn" olsun classımız.
aynı zamanda her butona açmak istediğimiz veri kaydının id'sini data-yaziid şeklinde verelim

Butonlarımızın Son Hali:

    <button type="button" class="btn btn-success btn-xs showModalBtn" data-yaziid="<?= $yazilar[$i]["id"]; ?>">

Modal'ı 1 kere ekleyip modal-body kısmına bir id verelim.

<div class="modal-body" id="modalBody">

</div>

sonrasında ise javascript kısmına geçelim:

$("body").on('click', '.showModalBtn', function(){
   var id = $(this).data('yaziid');
   $.ajax({
       method: "get",
       url: '[BURAYA URL GELECEK]', // Yazıları çekeceğimiz adres
       data: {
           id: id
       },
       success: function(data){
           $("#modalBody").html(data);
       }
   })
})

PHP kısmında ise GET ile yazının idsini alıp sadece echo ile içeriği döndürebilirsin.

#006180