#!/usr/bin/perl
use strict;
use warnings;
use Mojolicious::Lite;
get "/" => sub {
my $c = shift;
$c->clock;
$c->render("index");
};
helper clock => sub {
my $clock = { clock => time };
+shift->stash( $clock );
$clock;
};
get "/clock" => sub {
my $c = shift;
$c->render(json => $c->clock);
};
app->start;
__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
<title>MojoClock</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJ
+o="
crossorigin="anonymous"></script>
<style>* { font-family:"helvetica neue", helvetica }</style>
</head>
<body>
<h1 class="clock">
<%= $clock %>
</h1>
<script type="text/javascript">
function clockMe() {
$clock = $(".clock");
$.ajax({ type: "GET"
,url: "clock"
,success: function(json){
$clock.fadeOut(10,function(){ $clock.text(json.clock
+).fadeIn() });
}
,error: function(req,msg){
alert("Oh, noes! Errerz!!!");
} });
};
setInterval(clockMe, 1000)
</script>
</body>
</html>
I consider meta refresh an unambiguously worst UX practice except in the rare case of needing to do it *once* in a situation you want to present a message to the user before a real redirect or ensure a session timeout or something where JS is disabled… or pump up your page view stats for advertisers like certain broadsheet hacks who shall remain unnamed. :P
| 