Question

Has anyone found that their javascript doesnt work, but when they step through the code it works fine ?

    var cookie = getCookie('lusr');
var username = cookie;
if(!cookie){
    $("#UserNav").load("loginform.html");
    $("#loginbtn").click( function(){
        var username = $("#usernametxt").val();
        var password = $("#passwordtxt").val();
        login(username,password);
    });
}else{
    $("#UserNav").load("user.htm");
    $("#WelcomeUser").text("Welcome "+ username);
}

My issue occurs on this line :

        $("#WelcomeUser").text("Welcome "+ username);

Answer 1

That’s because load() is asynchronous: it returns right away, performs its work in the background, then calls a user-provided function when its task is complete. The stepping delay gives you the illusion that the function is synchronous and performs all its work before returning.

Therefore, you should pass a callback function to load() and perform your subsequent work inside that callback:

var cookie = getCookie("lusr");
if(!cookie) {
    $("#UserNav").load("loginform.html", function() {
        $("#loginbtn").click(function() {
            var username = $("#usernametxt").val();
            var password = $("#passwordtxt").val();
            login(username, password);
        });
    });
} else {
    $("#UserNav").load("user.htm", function() {
        $("#WelcomeUser").text("Welcome " + cookie);
    });
}