jQuery Ajax işleminin kendini tekrarlaması sorunu
Genellikle, ajax ile açtığım modal ekranı içindeki formu kaydederken; başka sayfaya gitmeden aynı ekranda modalı kapatıp; tekrar açarsam başıma gelen bir hataydı bu. İç içe kullanılan ajax, return false versek bile sayfa yenilenmeden çalıştığı için; her seferinde +1 olmak üzere ajax post işlemini tekrarlıyordu.
$(document.body).on("submit", "#form_report_ilan", function(e){
e.preventDefault();
$.ajax({
type: "post",
url: '/api/send_url',
data: {postData: 1, report_desc: $("textarea[name=report_desc]").val()},
cache: false,
success: function(msg) {
$('#ajaxLoaderModal .modal-body').html('<div class="ModalLoader">' + msg + '</div>');
}
});
return false;
});
Örneğin üstteki kod parçacığında meydana gelen bu sorunun, kısa vadede en hızlı ve net çözümü ise;
e.stopImmediatePropagation();
Nasıl?
preventDefault ile durdurduğumuz sayfa işlemini, stopImmediatePropagation ile ajax fonksiyonuna uyarlıyoruz. Böylece her seferinde işlem başa sarıyor ve tekrar tıklamadığı sürece ajax post etmiyor.