I try a simple login form, there is a Loading indicator, which hangs. Help me to understand.

// Attach AJAX "loading" event listener $(document).on({ ajaxStart : function() { $("#loadingBox").show() }, ajaxStop : function() { $("#loadingBox").hide() } }); function loginUser(event) { event.preventDefault(); let userData = { username : $('#formLogin input[name=username]').val(), password : $('#formLogin input[name=passwd]').val() }; $.ajax({ method : "POST", url : "/login", data : userData, success : loginSuccess, error : handleAjaxError }); function loginSuccess(userData) { saveAuthInSession(userData); showHideMenuLinks(); showHomeView(); showInfo(loginSuccess); } }

If you remove showInfo (loginSuccess), then the Loading indicator disappears when the request is successful, but accordingly I do not have a successful authentication message in this way.

 function showInfo(message) { $('#infoBox').text(message); $('#infoBox').show(); setTimeout(function() { $('#infoBox').fadeOut(); }, 3000); }

    1 answer 1

    The problem is that in this code

     showInfo(loginSuccess)

    loginSuccess is a feature !

    When you transfer it to $('#infoBox').text(message);

    A .text (function) is loginSuccess , in which loginSuccess is called loginSuccess and so on.

    Most likely, instead of loginSuccess you need to send some field from userData , or just the text of the message "login Success"

     function loginSuccess(userData) { saveAuthInSession(userData); showHideMenuLinks(); showHomeView(); showInfo("Login success"); }