How to call Java function dynamically from Javascript?

Question

I started to learn JSP, so I want to make displaying time dynamic on JSP.

I created a class Times

public class Times {
    DateTimeFormatter dtf =null;
    LocalDateTime now =null;
    public Times()
    {
         dtf = DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss");  
    }
    public String getTime()
    {
         now = LocalDateTime.now(); 

        return dtf.format(now);
    }


}

I call getTime function in the JSP file

<%@ page import="data.Times"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    var time="";
    function showTime(){
        <%
            Times t=new Times();
        %>
           time = '<%=t.getTime()%>';
    }
    function startTime() {
        showTime();
        document.getElementById('time').innerHTML =time;
        t = setInterval(function () {
            startTime()
        }, 500);
        }
</script>
<style>
    @font-face{
        font-family: clock;
        src:url(content/digital-7.ttf)
    }
    #time{
        width: 100%;
        margin: 0 auto;
        font-family: clock;
        font-size: 100px;
    }
</style>
</head>
<body onload="startTime()">
    <div id="time" align="center">
    </div>
</body>
</html>

But the problem is that the page is loaded, however, time is initialized but it remains unchanged.

If I refresh the page, time is properly changed. Can I change time dynamic way ?

http://34.91.166.167/ -- This page is my working page on googleCloud — Cengiz Altürk, Mar 03 '20 at 22:38

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Basically you have two main options:

AJAX

AJAX can be used in order to send a request to your backend. On your backend you could respond to these AJAX requests with the time and then in the callback refresh the time value.

Doing only on the client-side

You can also create a Date object based on the time received from the server and adjust it. But I suppose that you are more interested in the AJAX solution

Further explanation

Your code currently sends a page to the browser where the time is properly calculated initially. Your setInterval calls showTime, but <%=t.getTime()%> was evaluated at the server before the page was sent out. You need to establish further communication with your server if you intend to get information from there. Via AJAX, for example.

@CengizAltürk you are welcome. Also, I'm happy that your issue has been resolved. — Lajos Arpad, Mar 06 '20 at 11:43

score 1 · Accepted Answer · answered Mar 03 '20 at 23:06

When you display that page, the JSP is executed once on the server, which means that t.getTime() is executed once.

If you do a "View Source" in the web browser, you'll see that the server has generated the following:

<script type="text/javascript">

    var time="";
    function showTime(){
           time = '2020/03/03 17:47:45';
    }
    function startTime() {
        showTime();
        document.getElementById('time').innerHTML =time;
        t = setInterval(function () {
            startTime()
        }, 500);
        }
</script>

As you can see, the value of time is now fixed at the date/time the server processed the JSP. Calling showTime() repeatedly will not change the value of time.

If you want the time value to be "live", you need to do this in JavaScript code, not JSP code.

Here is a way to do it, based on this answer to question "Format JavaScript date as yyyy-mm-dd":

    function showTime() {
        const date = Date.now();
        time = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
                .toISOString()       // yyyy-MM-ddTHH:mm:ss.SSSZ
                .replace(/\..*/, '') // yyyy-MM-ddTHH:mm:ss
                .replace(/T/, ' ')   // yyyy-MM-dd HH:mm:ss
                .replace(/-/g, '/'); // yyyy/MM/dd HH:mm:ss
    }

Thanks for your answer – Cengiz Altürk Mar 05 '20 at 20:08 — Cengiz Altürk, Mar 05 '20 at 20:08

score 1 · Answer 3 · answered Mar 04 '20 at 11:20

1

time remains unchanged unless page invoked. in order to call dynamically try to refresh it for specified interval like below , include it in <head> </head>

<meta http-equiv="refresh" content="5" >

answered Mar 04 '20 at 11:20

SNL

79
1
4

Thanks for your answer – Cengiz Altürk Mar 05 '20 at 20:08
It's a pleasure Cengiz Altürk – SNL May 15 '20 at 12:09

How to call Java function dynamically from Javascript?

3 Answers3

AJAX

Doing only on the client-side

Further explanation