Modal kapanmadan yenileme | Cevap #12363

Anladım. Sayfa yenilendiğinde modal kapanacağı için sayfa yenilenmeden sadece tablo içeriğini yenilemek istiyorsun. Bu durumda, modal gösterildiğinde jQuery $.ajax yöntemini kullanarak tablo verilerini alabilir ve ardından modal içindeki tabloyu güncelleyebilirsiniz.
Örnek olarak aşağıdaki kod yapısını kullanabilirsiniz:


<!-- Modal açma butonu -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Modal Aç
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tablo İçeriği</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="table-content">
        <!-- Tablo içeriği bu kısımda olacak -->
      </div>
    </div>
  </div>
</div>

$(function() {
  $("#exampleModal").on("show.bs.modal", function() {
    // Tablo içeriği modal gösterilmeden önce yeniden yüklenir
    $.ajax({
      type: "POST",
      url: "yenitablo.php", // yenitablo.php dosyası içinde tablo verileri oluşturulabilir
      success: function(response) {
        $("#table-content").html(response); // Gelen veriler modal içindeki tabloya eklenir
      }
    });
  });

  $("#table-refresh").click(function() {
    // Tablo yenile butonuna tıklandığında modal içeriği yeniden yüklenir
    $.ajax({
      type: "POST",
      url: "yenitablo.php", // yenitablo.php dosyası içinde tablo verileri oluşturulabilir
      success: function(response) {
        $("#table-content").html(response); // Gelen veriler modal içindeki tabloya eklenir
      }
    });
  });
});

Yukarıdaki örnek kodda, $("#exampleModal").on("show.bs.modal", function() {...}); kod bloğu, modal gösterilmeden önce çalıştırılacak kodları içerir. Burada $.ajax yöntemi kullanarak yenitablo.php dosyasından tablo verileri alınır ve modal içindeki tablo güncellenir.
Daha sonra, $("#table-refresh").click(function() {...}); kod bloğu, tablo yenile butonuna tıklandığında çalışacak kodları içerir. Bu kod bloğunda da $.ajax yöntemi kullanarak yenitablo.php dosyasından tablo verileri alınır ve modal içindeki tablo güncellenir.
Tablo yenileme butonunu HTML koduna ayrıca eklemeniz gerekecektir. Örneğin, yukarıdaki örnekte butonun açıklaması “Tabloyu Yenile” olarak düzenlenmiş ve id="table-refresh" özelliği eklenmiştir.
Bu sayede, modal açıkken tablo yenileme butonuna tıkladığınızda sadece tablo içeriği yenilenir ve modal kapanmaz. @resat