How to stop refreshing page after ajax call?

I am unable to stop refreshing page after ajax call. I have tried by putting e.preventDefault(); and return false; as well but again my page is refreshing.

I dont know what is the problem with the code or something. Please help me to stop refreshing page after ajax call. solving this issue would be a great help for me. Thanks in advance.

Here is my code:

$(document).ready(function() {
    $('#loginForm').on('click', function(e) {
        e.preventDefault();
        var formData = {
            'uname'  : $('#uname').val(),
            'pwd'    :      $('#pwd').val()
        };
        $.ajax({
            type        : "POST",
            url         : "getresults.php", 
            data        : formData
        }).done(function(data) {
              alert(data+"This is working");
        }).fail(function(data) {
              alert("This is not working");
        });
    });
});

Answers:

Answer

Is the id #loginForm pointing to a form? If yes you need to listen to the submit event instead of click. If you really need to listen to the click event, you have to bind the event to the submit button or whatever triggers the form.submit().

Try something like this:

$('#loginForm').on('submit', function(e) {
    e.preventDefault();
    e.stopPropagation(); // only neccessary if something above is listening to the (default-)event too

    [YOUR CODE GOES HERE]
});

This should do the trick for you.

Answer

Adding type="button" attribute to button solved my problem. Otherwise it was interpreted as submit operation.

Answer

I think just adding return false after the on click function will stop the page from refreshing

Answer

This was happening to me earlier tonight, and I found my way to this question - This might be a long shot but I realized what my issue was and figure this might help someone in the future dealing with this.

Are you using something like live-server locally or some other form of script that intelligently refreshes local code if new files appear in the same working folder? If so - the page is refreshing not because of your code, but because whatever ajax you called manipulated the folder you were working in resulting in the page 'updating'.

Answer

This can happen when you have turned on live server extension or something like that refresh html pages.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.