Modal kapanmadan yenileme
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');
}
}
})
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
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">×</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
Şö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.