Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Updating contents of a jsp page without refreshing

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.

like image 430
gautam vegeta Avatar asked Feb 14 '12 16:02

gautam vegeta


2 Answers

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>
like image 51
david99world Avatar answered Sep 19 '22 22:09

david99world


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

like image 43
jmj Avatar answered Sep 20 '22 22:09

jmj