Java, Struts2, jQuery : Validate login fields without redirecting to another page

Question

I've got a web app that I've built using Java, JDBC for database access, Struts2 to pass data to the views, and jQuery to aid in view manipulation.

When the app starts, it executes Home.action and displays the Home.jsp page which includes a "SIGN IN" link at the top. There are other views that include the "SIGN IN" link at the top as well.

When a user clicks on "SIGN IN", jQuery causes a hidden pane to appear that provides text fields for username and password and a "Login" button.

Here's my dilemma... currently, clicking on the "Login" button executes Login.action and then redirects back to Home.action. However, what I'd really like is for Login.action to perform the login, but remain on the same page. In fact, I don't want the view to change or refresh at all; I simply want the login to happen and all else to remain the same.

I have two main reasons for this: 1) If the user enters invalid field data or the login is unsuccessful, I don't want to go anywhere; I just want to display the error to the user. 2) Since multiple pages offer the ability to login at the top, I don't want to arbitrarily redirect back to Home.action; I want the user to stay where they are.

So, my question to the community is this: can I do that with the technologies that I've already employed (and how?), or do I need to look into adding other technology (and which ones?)?

Thanks very much!

Answer 1

I will try to summarize as best as I can.

Option 1: Go with SPA (Singe-page Application). You may add another JavaScript framework on to top of jQuery to make your life easier. More information on: http://en.wikipedia.org/wiki/Single-page_application

Option 2: You can create your own JavaScript MVC Framework using jQuery (or whatever is available in the market).

Notice that after deciding between Option1 and Option2 you will have two layers: Presentation Layer + Business Layer.

Finally, you can make Ajax calls to your Web Service and control any redirect or display behaviour from the presentation layer. In conclusion, your presentation is totally independent from your business layer.

Let's see if I can illustrate an example:

This would be part of our login.html

<script type="text/javascript">
$(document).ready(function(){
    $("#singInButton").click(function{
    var parameters = {SignIn:{username:"userNameFromField", password:"passwordFromField"}};
    $.post("signin", parameters, function(data, status){
            if(data.message === "SUCCESS") {
                alert("Welcome back.");
            }else{
                alert("Invalid credentials. Please, try again.");
            }
        });
    });
});
</script>

Let's suppose this would generate a request like: {SignIn:{username:"userNameFromField", password:"passwordFromField"}}

On the server side it was verified that these are valid credentials. So, you would return something like (sorry, I'm not familiar with Struts, but I am sure you can figure it out):

response.setContentType("application/json");
response.setResponseBody("SUCCESS");

Finally, the user interface would alert "Welcome back.". You do not have to dispatch your response, just return what you want in the correct format. Of course, there are hundreds of frameworks to make life easier and convert json or xml objects into JavaObject so you do not have to parse strings manually.

I hope this example can clarify what I am trying to say.

Cheers,