calling a function and callback not working

183
June 26, 2017, at 10:10 PM

So I have a function that checks for Login and runs a few different things. Then I'm trying to call that function later in the page and have it execute another function after that's successful. Maybe my structures not correct, although I've tried moving things around quite a bit and nothing seems to change anything or it breaks my code. Maybe this isn't the best way to this. Any ideas.

function callLogin(callback) {
  if (document.getElementById("userLoggedIn") === null) {
    $(".cover").fadeIn(200, function() {
      $(".sixPinInputContainer").fadeIn(200, function() {
        $('.sixPinInput').first().focus()
        $("#pageBody").css("overflow", "hidden");
        var failedAttempts = 0;
        var password = "";
        $('.sixPinInput').keyup(function(k) {
          //DATA ENTERED INTO FIELD
          if (this.value.length == this.maxLength) {
            password = password + this.value;
            $(this).next('.sixPinInput').focus();
          }
          //PRESSING DELETE
          if (k.keyCode == 8) {
            $(this).prev().val("").focus();
            password = password.slice(0, -1);
          }
          password = password.substring(0, 6);
          $(".pinIncorrectMessage").css("display", "none");
        });
        $("#f").keyup(function(callback) {
          if ($("#f").val().length > 0) {
            $.post("http://heber/QC/includes/pinInput/getUserInfo.php", {
              user: password
            }, function(data, status) {
              password = "";
              $(".sixPinInput").val("");
              $(data).each(function(index, value) {
                var firstName = value.firstName;
                var color1 = value.color1;
                var color2 = value.color2;
                var authorizationLevel = value.authorizationLevel;
                var something = value.something;
                //IF SUCCESSFUL LOGIN
                if (firstName) {
                  $(".cover").fadeOut(200);
                  $(".sixPinInputContainer").fadeOut(200);
                  $("#pageBody").css("overflow", "scroll");
                  $("#userName").html(firstName);
                  $("#pageBody").css("background", "radial-gradient(at top left," + color1 + "," + color2 + ")");
                  $("#userSession").html("<div id='userLoggedIn'></div>");
                  password = "";
                }
                //IF FAILED LOGIN
                if (!firstName) {
                  $(".pinIncorrectMessage").css("display", "block");
                  $(".sixPinInput").first().focus();
                  $(".sixPinInput").val("");
                  $("#userName").html(firstName);
                  $("#pageBody").css("background", "radial-gradient(at top left," + color1 + "," + color2 + ")");
                  password = "";
                  failedAttempts = failedAttempts + 1;
                  if (failedAttempts >= 3) {
                    alert("If you forgot your password Please have it reset, You have " + (6 - failedAttempts) + " more Attempts");
                  };
                  if (failedAttempts >= 6) {
                    $(".cover").css("background-color", "black").css("z-index", "2000").css("cursor", "none");
                  }
                }
              })
            })
          }
        })
      });
    });
  };
  callback();
};

Here's where I call the function and it runs the code inside before my login has completed.

callLogin(function() {
    $("#" + rowID).load("eventHandlersPHP/updateStart.php", {
    roomID: id }, function(data, status) {
       $("#notStartedCount").load("eventHandlersPHP/jobsNotStartedCount.php"); 
    });
});  
Answer 1

Try moving the call of callback to the point where your request has completed :

//IF SUCCESSFUL LOGIN
if (firstName) {
    $(".cover").fadeOut(200);
    $(".sixPinInputContainer").fadeOut(200);
    $("#pageBody").css("overflow", "scroll");
    $("#userName").html(firstName);
    $("#pageBody").css("background","radial-gradient(at top left," + color1 + "," + color2 + ")");
    $("#userSession").html("<div id='userLoggedIn'></div>");
    password = "";
    callback();
}
READ ALSO
voiceover function disable on web page

voiceover function disable on web page

Can you turn off the voiceover function on a particular web page? Or can I delete audio with js - jquery on the DOM page? (like when Chrome disables the sound of a tab)

250
Pass data back to parent file from a ajax loaded file without using PHP

Pass data back to parent file from a ajax loaded file without using PHP

In INDEXPHP I open a Boostrap dialog which loads via ajax BACKUPS

198
Unwrapping text spans with no class assigned

Unwrapping text spans with no class assigned

I want to remove (using jQuery or JavaScript) the spans in text that have no class names assigned to them, but leave the contents intact (preserving spaces and everything) and also leave other spans that have a class name assignedFor instance, I want this

230