AJAX call not executing JavaScript function. Why? Work-around?

Question

I'm * POST *ing to a PHP login script via an AJAX call. Upon success, I need to call a JavaScript function loggedIn() . I tried having it print...

<script type="text/javascript">loggedIn();</script>

... as the .innerHTML of a div, as well as trying an onload="" event on the div tag. Neither method allowed me to call the JavaScript function. I can print a letter inside the div and execute it on the onclick="" event, but the whole thing I'm trying to get away from is actually having to click anything. Bascially, I want a header("...") redirect (which also wouldn't work).

First, can someone explain what is actually happening? My bet is on the asynchronous nature of AJAX. Secondly, does anyone know a work around I might employ go about refreshing the page upon success?

Thanks as always, Z@K!

Answer 1

Dumping some a chunk of javascript into a div won't automatically run it. Such a thing only works while the page is being generated. You'd need to have the function defined before handle, them do a simple loggedIn() call within your ajax handler when it gets the success notice from the server.

Answer 2

Take a look at jQuery and it's $.ajax() function. It'll do exactly what you're looking for with the onSuccess handler.

Answer 3

You ask what is happening - and I can't tell you that without seeing your code. Here is what I would expect to happen.

Your home page (index.php) may include a form containing the username, and password fields, and a button to submit the form. Index.php may contain only the logon screen, or the form may be a small option on the side.

a) The user enters his username and password and clicks the login button. The data is then POSTed to the server, to the URL set up in the form tag.

b) This php script, validates the username and password (being careful to encrypt the password before looking for the user's record in the database, so the password is not stored in plain text).

c) If the user and password is acceptable, session variables are stored, and a "start" screen is generated. If not the log-on screen is generated again, with an error message (that does not admit which is wrong).

d) As the code exists, the session is saved and the generated screen is sent to the browser (automatically).

e) All pages that must be protected by the login, must execute session_start() and present the login screen if the logged_in flag is not set. An easy way to do this is to redirect to the home page.

Do not use AJAX to handle the login screen, because you need to show a different screen if the validation fails to when it succeeds. AJAX would mean that you would have to have already sent the passord protected screen to the user before he logs in, and that is a bad idea. For login, AJAX gains you nothing.

Where AJAX is helpful is when you need to send data to the server for storage, in case the client crashes. AJAX is also useful when the client needs some extra data following some user input. For example, in a checkout, the user enters his country, and the page then fetches the postage costs using AJAX.

Answer 4

// Create a callback handler
xmlHttp.onreadystatechange = function () {
    // readyState == 4 | The request is complete
    // status == 200 | Request completed successfully.The page is found and displayed.
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
        if (xmlHttp.responseText == "SUCCESS") {
            document.location.href = redirect_url;
        } else {
            var elemObj = document.getElementById(div_id);
            elemObj.innerHTML = xmlHttp.responseText;
        }
    }
}

In my normal callback handler I added...

        if (xmlHttp.responseText == "SUCCESS") {
            document.location.href = redirect_url;
        }

Since HTML is a string, and "SUCCESS" is a string I didn't really have to do anything different, except check the results of the login action for "SUCCESS". Then use document.location.href to redirect the page to the appropriate URL.

This works perfect for my application. Thank you everyone for your input!

~Z@K!