Updating contents of a jsp page without refreshing

java javascript ajax jsp jakarta-ee

31,876

Solution 1

You should look into using Ajax (jQuery is my preferred method).

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

This would then hit a controller that would return the data you want without refreshing the page.

So for instance, if you had a login.jsp...

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<head>
    <title>Login</title>
</head>
<body>
<h1>
    Hello please login to this application  
</h1>
<script>

        function login(){
            var username = $("#username").val();
            var password = $("#password").val();

            $.post('login', { username : username , password : password }, function(data) {
                $('#results').html(data).hide().slideDown('slow');
            } );
        }

</script>
Username : <input id="username" type="text" />
Password : <input id="password" type="password" />
<input name="send" type="submit" value="Click me" onclick="login()" />
<form name="next" action="auth/details" method="get">
    <input name="send" type="submit" value="Go Through"/>
</form>
<div id="results" />
</body>
</html>

In your controller, you would then hit the Model, but for simplicity, I've done a very simple example...

/**
 * Handles requests for the application home page.
 */
@Controller
public class LoginController {

    private static final Logger logger = LoggerFactory.getLogger(LoginController.class);

    Util util;

    /**
     * Simply selects the home view to render by returning its name.
     */
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String home(Locale locale, Model model, String username, String password) {


        if(username.equalsIgnoreCase("david"))
        {
            model.addAttribute("validUser", "Welcome " + username );

            return "home";
        }
        else
        {
            model.addAttribute("validUser", "Incorrect username and password");
            return "home";
        }

    }

}

This would then add a slow scrolling bit of html to the div to say if it's valid, the code for home is below...

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<html>
<body>
<P>  ${validUser}. </P>
</body>
</html>

Solution 2

You can make ajax request and pull the data from server and use java script to render that data on the view

31,876

Author by

gautam vegeta

Updated on January 26, 2020

Comments

gautam vegeta over 4 years

I have a jsp page which shows the contents of a table. While the user views a page the contents of the table changes on a second-by-second basis. So the user has to refresh the page every time to see fresh and updated contents. How can i update contents of the jsp page without having to refresh the page. I wanted a functionality just like in gmail.com where the size of the mailbox just keeps increasing without users refreshing.