v2.5.2
Giriş yap

Modal kapanmadan yenileme

resat
575 defa görüntülendi

Merhaba arkadaşlar, bir sepetim var ve modal ile açılıyor. Modal açıkken sepette anlık olarka güncelleme yapıyorum. Yapmak istediğim güncelleme yaptığımda otomatik olarak tablonun 2 sn sonra yenilenmesi. nasıl yapabilirim acaba?

   		$.ajax({
					type: "POST",
					url: "sepetguncelle.php",
					data:siparis,
					dataType: 'json',
					success: function(data){
						if (data) {
							$(obj).removeClass('bg-danger');
							$(obj).addClass('bg-success');
						}
					}
				})

Cevap yaz
Cevaplar (3)
f4kor4ll
644 gün önce

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

resat
644 gün önce

@f4kor4ll cevabın için teşekkürler. Fakat başlıkta belirttiğim gibi tablo bir modal içinde bulunuyor. Yani location.reload(); ile sayfa komple yenileniyor ve modal kapanıyor malesef.

f4kor4ll
644 gün önce

Şöyle bir çözüm önerim var:

Güncelleme işleminin başarı durumunda tamamlanması için bir geri bildirim sağlayın.

Bu geri bildirimi takip eden hazır fonksiyon sayesinde, tablonun yenilenmesi için bir zamanlayıcı kurun.

Örneğin kodunuzu şu şekilde güncelleyebilirsiniz:

$.ajax({
    type: "POST",
    url: "sepetguncelle.php",
    data: siparis,
    dataType: 'json',
    success: function(data) {
        if (data) {
            $(obj).removeClass('bg-danger');
            $(obj).addClass('bg-success');

            // Güncelleme işlemi başarılıysa, tablonun 2 saniye sonra yenileneceği zamanlayıcıyı kurun
            setTimeout(function() {
                // Sepet tablosunun yeniden yüklenmesi gerekiyor
                location.reload();
            }, 2000);
        }
    }
})

Yukarıdaki JavaScript kodundaki setTimeout() işlevi, verilen süre (microseconds cinsinden) sonunda verilen bir işlevi (burada sayfa yenileme işlemini) tetiklemek için kullanılır.
Bu şekilde, güncelleme işlemi tamamlanır tamamlanmaz 2 saniye içinde tablonun güncellenmesi için bir zamanlayıcı oluşturulacaktır. Bu sayede, herhangi bir gecikme olmadan anlık olarak güncellenmiş sepetteki değişiklikleri görebilirsiniz.