Login and stay on the same page?

Question

I'm trying to make a sleek login function here =)

I want the "login experience" to be smooth and seamless, so I don't want the user to "feel" like he/she is being "redirected" and taken back to the same page again.

So the process goes:

1. User X visits page A
2. X is not logged in
3. X presses on Login btn (that lives in a in a div together with the form)
4. Login fields and buttons fade away
5. X is logged in and still on page A (without noticing a "redirection")

Thank you for all your answers!

Answer 1

You can use jQuery.load to re-request the same page (which should load the correct content since the session was created). It has support for loading part of the requested document.

Example:

function onSuccessfulLogin() {
   $("#content").load(window.location.href + " #content");
}

EDIT: Oops, sorry, I think I misunderstood. I thought page A had content only visible to authenticated users, and you were showing a login form and wanted the correct content to show up once they authenticated.

If you just want the async. login, you can add a submit handler to the login form that submits the form to some sort of login handler script that returns whether their login attempt was successful.

$("#loginform").bind("submit", function () {
    $.ajax({
       url: "login.php",
       method: "post",
       cache: false,
       dataType: "json", // for example
       data: $(this).serialize(),
       success: function (data) { // data is the JS object based on the JSON returned
          if (data.success) {
             $(this).fadeOut();
          } else {
             alert("bad login: "+data.error);
          }
       }
    });

    return false;
});

Answer 2

I solved this using an Ajax login system that reloaded the page after a succesful login. If you don't want to reload the current page, you will need a JavaScript based system to show and hide a logged in state. (although I think that might complicate any further development)

Answer 3

One way that you could accomplish this, would be to use some AJAX and a modal dialog containing the required login fields and the submit button. You can do a slick implementation using a Dojo dialog dijit.