How do I ajax-update a component at an interval of 1 second?

Question

I was asked this question in an interview at Dell.

new Date() gives you a Date object initialized with the current date / time.

Let suppose the right top corner of my screen shows the present time, and one has done like this.

<h:outputText value="#{bean.presentDateTime}" />

How will this be modified to always show the present date with time?

Synchronizing working clocks (working on a second, millisecond or lower range) to the server definitely kills the server. They are not advisable in web applications. — Tiny, Jun 21 '15 at 04:05
That must be a trick question. It isn't possible without JS. Note that ajax actually uses JS. Or, there may be means of a misunderstanding/misinterpreting as to "without JavaScript" part actually being stated in the real question. — BalusC, Jun 21 '15 at 07:36
@BalusC: Oh yes! you got it right. Without Javascript, I mean that I need to make use of partial page rendering and not plain javascript. I edited the caption. — Farhan stands with Palestine, Jun 21 '15 at 08:08
BalusC is right. Without a "client-side" refresh, you cannot achieve this. It's the nature of a http-request, that once it has been completed, no change can happen to the content. So there need to be a client side script to invoke frequent updates of the value. (There are things that look like plain "server-side" such as primefaces' `p:poll` - but in fact they just generate the required javascript for you.) — dognose, Jun 21 '15 at 16:42

BalusC · Accepted Answer · 2015-11-19T13:06:31.510

Basically, you want to hit the server and update the result at timed intervals. This is called "polling". Standard JSF has no builtin facilities for this, so you still need to write a bit of JS code yourself (or, theoretically, grab a JSF component which transparently renders the desired JS code for you). In JavaScript, you can use setInterval() to execute a function at intervals.

So, once you give the timestamp component a fixed ID,

<h:outputText id="presentDateTime" value="#{bean.presentDateTime}" />

and you supply the below hidden form whose command button ajax-updates it,

<h:form id="hiddenForm" style="display:none">
    <h:commandButton id="updatePresentDateTime">
        <f:ajax render=":presentDateTime" />
    </h:commandButton>
</h:form>

then you can get it to run with the below script executed during DOM/window/body ready.

<script>
    setInterval(function() {
        document.getElementById("hiddenForm:updatePresentDateTime").click();
    }, 1000);
</script>

Don't use it for this very purpose (a client side clock) in production though. It's at most OK as an answer to an interview question (or as an example in some showcase page). In production, better grab "pure" JS, if necessary in combination with a poll which runs at a reasonable longer interval, e.g. 1 minute. Or if your environment supports it, use push via WS or SSE.

I do remember almost everyday what i have promised. Unfortunately that item is currently out of stock. Please don't even have the slightest doubt about it. I will definitely. And that thank you for the answer. — Farhan stands with Palestine, Jun 22 '15 at 18:40

How do I ajax-update a component at an interval of 1 second?

1 Answers1

Linked