JSON response was so late

Question

I have url like this:

example.com/account/reset/6b183b5025d5b865963f4499f257705d

and i have a ajax submit in my script like this:

form.ajaxSubmit({
                url: '/account/reset',
                success: function (result, status, xhr, $form) {
                    if (result.status === 'success') {
                        window.location.replace("/account/login");
                    }else{
                        btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
                        showErrorMsg(form, 'danger', result.message);
                        alert(result.status);
                    }
                }
            });

here's the response:

{"status":"success","title":"Success!","message":"Password changed successfully please login to continue"}

when the form ajax was submitted, i got a response which trigger an alert with 'undefined' and after that alert i got the json response with success status. how come i got 2 response? and how do i can caught that second response before the first one?

here's the full JS if needed:

//== Class Definition
let reset = function () {

    let reset = $('#m_login');

    let showErrorMsg = function (form, type, msg) {
        let alert = $('<div class="m-alert m-alert--outline alert alert-' + type + ' alert-dismissible" role="alert">\
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>\
            <span></span>\
        </div>');

        form.find('.alert').remove();
        alert.prependTo(form);
        //alert.animateClass('fadeIn animated');
        mUtil.animateClass(alert[0], 'fadeIn animated');
        alert.find('span').html(msg);
    };

    let resetPassword = function () {
        $('#m_login_reset_submit').click(function (e) {
            e.preventDefault();

            let btn = $(this);
            let form = $(this).closest('form');

            form.validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 12
                    },
                    password_confirmation: {
                        required: true,
                        equalTo: '#password'
                    }
                }
            });

            if (!form.valid()) {
                return;
            }

            btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);

            form.ajaxSubmit({
                url: '/account/reset',
                success: function (result, status, xhr, $form) {
                    if (result.status === 'success') {
                        window.location.replace("/account/login");
                    }else{
                        btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
                        showErrorMsg(form, 'danger', result.message);
                        alert(result.status);
                    }
                }
            });
        });
    };


    //== Public Functions
    return {
        // public functions
        init: function () {
            resetPassword();
        }
    };
}();
//== Class Initialization
jQuery(document).ready(function () {
    reset.init();
    $(document).ajaxError(function (e, xhr, opt, thrownError) {
        swal({
            title: xhr.status + " " + xhr.statusText,
            //text: "Error requesting : " + opt.url +" "+ thrownError,
            text: xhr.responseText,
            type: "error",
            timer: 15000
        });
        $('#m_login_signin_submit').removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
    });
});

Answer 1

I don't know why you've seen two alert windows, or even if that's the case, since you've described it a little ambigously. However, the reason you're getting undefined is that JavaScript won't decode the JSON data automatically. Therefore, you need to decode the JSON to a data structure first:

success: function (encoded, status, xhr, $form) {
    decoded = JSON.parse(encoded)
    if (decoded.status === 'success') {