0

Working on 'check' problem in finance. I've implemented the actual check function via GET HTTP and responses are valid, have also implemented into the register.html page, with simply displaying the JSON response, which also works.

Now trying to implement displaying specific html instead of simple JSON replay (which is "true" or "false").

I've been trying to do this via a callback function > function loadresponse(username, username_check) where loadresponse will display the right html, depending on the response in username_check.

Running into two problems: 1. Running into 404 not found for my html templates...they're all in the same file, so not sure why this is happening. 2. I'm not sure that my loadresponse function interaction with the inner function, username_check, is correct. Specifically if (response == "true") is this a valid condition?

function username_check(name){

    // when username is null
    if (name == "")
        return;

    // create AJAX object
    var ajax = new XMLHttpRequest();

    // when page is loaded, have a callback
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            return;

        }
    };

    // open the requested file and transmit data
    ajax.open('GET', "http://ide50-XXXXXXXX.legacy.cs50.io:8080/check? 
username="+name, true);
    ajax.send();

}

function loadresponse(name, cFunction){
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            $('#username_check').html(ajax.responseText);
        }
    }
    var response = cFunction(name);
    console.log(response);
    if (response == "true") {
        ajax.open('GET', "good_user.html", true);
        ajax.send();
    }
    else {
        ajax.open('GET', "bad_user.html", true);
        ajax.send();
    }

}

HTML below:

<form action="/register" method="post" class="needs-validation" onsubmit="loadresponse(username.value, username_check)" novalidate>
    <h5>Please choose a username and password</h5>

    <div class="form-group">
        <br><input type="text" name="username" autofocus class="form-control" id="username1" placeholder="Username" required>
    </div>

  <button type="submit" class="btn btn-primary">Register</button>

</form>

<div id=username_check>
    ajax goes here
</div>
0

Multiple things. First, make sure to read the second half of the specification of /check again. You are meant to prevent submission, start the AJAX request, and if it returns true (JSON-encoded), submit the form via JavaScript. It does not mention additional HTML files, and you can't access templates in the browser, only the static folder is served as-is.

Also, you don't seem to get the "async" part (the first A in AJAX, a tricky one). Your function initiates the HTTP request, then proceeds execution until it reaches a return or the end (which is an implicit return undefined;), returning execution to the calling code. The HTTP request works in the background, when it has finished the callback is enqueued for execution once the browser has finished current code (and other things in a queue, as queues are FIFO, First In First Out). That means you have to preventDefault immediately, and submit() again in the callback if it is successful.

1
  • Clearly I have to go back to drawing board :-) so that's what I'll do. Thanks for taking the time! Apr 9 '19 at 7:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .