$.ajax json GET reverts all jquery after page load

Question

So I have a one page site, that only shows a login with username and password. I have the $.ajax fire on the submit click.

What I want is for it remove the login box and load in the page that will have all the content ready for the ajax content to go into.

$.ajax function works and was tested by alert(n); the number for my json array.

What happens is after the box disappears and the page loads, it reverts back to the login box.

$(document).ready(function() {
$('#launchform').click(function() {
    $.ajax({
        url: 'campaign.json',
        dataType: 'JSON',
        type: 'GET',
        success: function (data) {
            console.log(data);
            var string = JSON.stringify($('form').serializeArray());
            var login = JSON.parse(string);
            var username = login[0].value;
            var password = login[1].value;
            var n = '';
            for (var i = 0; i < data.result.length; i++){
                    if (data.result[i].name == username){
                        if (data.result[i].id == password){
                            var n = i;
                    }
                } 
            }
            if(n!=='') {
                $(".container").remove();
                $("#loginfade").load("test.html");
            } else {
                alert('Invalid Username/Password Combination.');
            }

        }

    });
});

});

Can you clarify what you mean by "remove the login box and load in the page that will have all the content ready for the ajax content to go into."? I don't know what that means. — Mike, Nov 20 '15 at 01:36

Maltronic · Answer 1 · 2015-11-20T02:03:36.997

If you are performing this within a <form> element then the form is probably submitting after the ajax call and reloading the page. Try adding:

return false;

to the end of the click event function to prevent the form submitting.

So the above code would look like:

$(document).ready(function() {
$('#launchform').click(function() {
    $.ajax({
        url: 'campaign.json',
        dataType: 'JSON',
        type: 'GET',
        success: function (data) {
            console.log(data);
            var string = JSON.stringify($('form').serializeArray());
            var login = JSON.parse(string);
            var username = login[0].value;
            var password = login[1].value;
            var n = '';
            for (var i = 0; i < data.result.length; i++){
                    if (data.result[i].name == username){
                        if (data.result[i].id == password){
                            var n = i;
                    }
                } 
            }
            if(n!=='') {
                $(".container").remove();
                $("#loginfade").load("test.html");
            } else {
                alert('Invalid Username/Password Combination.');
            }

        }

    });

    return false;
});

The return value of an AJAX callback function is ignored. The `return false` belongs in the `.click()` function, not the callback. — Barmar, Nov 20 '15 at 01:49

score 1 · Accepted Answer · edited May 23 '17 at 12:15

This is a pretty common problem. When you bind to a submit event, you are effectively able to run some logic, but unless you stop it, the event will continue to propagate and will also run the normal submit logic, which causes a full page refresh. This is fairly easy to prevent:

$(document).ready(function() {
    $('#launchform').on('click', function(e) {
        e.preventDefault(); // Add this
    });
});

As stated in another answer, you can also return false;. That is sometimes a better way to do it when using jQuery as it effectively cancels everything. Although, in non-jQuery solutions, it doesn't stop the event bubbling. You can read more details about why here: event.preventDefault() vs. return false

Thank you so much!! I ended up using "return false;" but the documentation on the event.preventDefault() is great! — Joseph Veitch, Nov 20 '15 at 01:46

$.ajax json GET reverts all jquery after page load

2 Answers2