How to call Java function dynamically from Javascript?

Cengiz Altürk :

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 ?

Andreas :

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
    }

How to call Java function dynamically from Javascript?

Guess you like