JQuery Post İşlemi Sonrasında Sayfa Yeniden Yükleniyor. Sayfa Yenileniyor.

Bu bir çözüm makalesi arkadaşlar.

Problem tam olarak şu şekilde karşınıza çıkıyor. Bir metoda datayı JQuery ile post ediyorsunuz (veya get çok farketmez) ancak bu işlem sonrasında bir şekilde sayfa sizin isteğiniz dışında tekrar yükleniyor. (refresh) Bu durumun aslında iki çözümü var. Bu yazıda kısaca bunlardan bahsetmek istiyorum.

Çözümler, aslında problemin oluştuğu kod yapısına göre çözülüyor. Bu yüzden iki adet dedim. Birincisi, klasik JavaScript bir fonksiyonu bir buton ile tetiklenerek POST işlemi yapıldıktan sonra gerçekleşebiliyor. Örnek kod aşağıdaki gibi olsun.

function onChangeClickButton(Id) {
    $.ajax({
        type: 'POST',
        datatype: "json",
        url: "/home/change-index",
        data: {
            __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
            Id: $("#Id").val()
        },
        success: function (data) {

            if (data.success) {

                alert("İşlem başarılı");

            } else {

                alert(data.message);

            }

        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        }
    });
}

Bu kodu tetikleyen buton satırımızda aşağıdaki gibi olsun.

<a href="#" onclick="onChangeClickButton(this.Id);">Buraya Tıkla</a>

Yukarıdaki örneği, herhangi bir buton ile tetiklemek istediğinizde özellikle bu buton SUBMIT özelliğe sahip bir buton ise veya bir componentin içerisinde (Kendo Grid, DataTables, vs…) bir buton ise POST işleminin hemen ardından sayfanız yeniden yüklenebilir. Bunu durdurmak için aslında Function üzerinde bir değişiklik yapmayarak, basit bir şekilde buton/link kodumuzu aşağıdaki gibi değiştirmemiz yeterli.

<a href="#" onclick="onChangeClickButton(this.Id); return false;">Buraya Tıkla</a>

İşte bu işlemi yaptığımızda problemsiz bir şekilde sorun çözülmüş olacak ve sayfa yenilenmeden post işlemi yapılmış olacak.

İkinci husus ise bu post işlemini JQuery bir fonksiyon ile gerçekleştiriyor isek çözüme yönelik. Gelin bir de bundan bahsedelim. Bu gibi bir duruma örnek olarak da aşağıdaki gibi bir kod bloğumuz olsun.

$('#loginForm').on('submit', function(e) {


$.ajax({
        type: 'POST',
        datatype: "json",
        url: "/home/change-index",
        data: {
            __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
            Id: $("#Id").val()
        },
        success: function (data) {

            if (data.success) {

                alert("İşlem başarılı");

            } else {

                alert(data.message);

            }

        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        }
    });
});

Tabi bu bir formu submit etmek için. Bir de sadece buton click özelliği için bakalım.

$('#btnGonder').on('click', function(e) {
 
$.ajax({
        type: 'POST',
        datatype: "json",
        url: "/home/change-index",
        data: {
            __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
            Id: $("#Id").val()
        },
        success: function (data) {

            if (data.success) {

                alert("İşlem başarılı");

            } else {

                alert(data.message);

            }

        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.responseText);
        }
    });

});

Burada çözümü link veya buton üzerinde değil de direk metod içerisine “e.preventDefault();” ve “e.stopPropagation();” fonksiyonlarını tanımlayarak buluyoruz. “$(‘#btnGonder’).on(‘click’, function(e) {” cümlesinin hemen altına aşağıdaki komutları eklediğimizde sorun ortadan kalkmış olacaktır.

e.preventDefault();
e.stopPropagation();
0 0 votes
Article Rating
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments