How to show date with inline jquery?

My js file is drawing html on the webpage, by writing to the html of a div called “debug”.

$('#mydebug').html(document.write('my HTML here'));

I’d like to display today’s date. None of these are working. The word “Time” appears, but not the date or time.

I understand that i can use getElementById to display the date in a separate HTML tag, but i would like to know how to display the data inline, without attaching it to some other tag.

$('#debug').html('<h3>Time: '+getDate()+'</h3>');
$('#debug').html('<h3>Time: '.getDate().'</h3>');
$('#debug').html('<h3>Time: '.<%response.write(date())%>.'</h3>');
$('#debug').html('<h3>Time: <%response.write(date())%>.</h3>');
$('#debug').html('<h3>Time: <script type="text/javascript">document.write("<strong>" + (new Date()).toString() + "</strong>");</script></h3>');
$('#debug').html('<h3>Time: <script type=”text/javascript”>
 document.write(“<strong>” + (new Date()).toString() + “</strong>”);</script></h3>');
$('#debug').html('<h3>Time: <script>echo today</script></h3>');
$('#debug').html('<h3>Time: <script>today</script></h3>');
$('#debug').html('<h2>Time: <script>today()</script></h2>');
$('#debug').html('Time: <script>getTime</script>');
$('#debug').html('Time: <script>getTime();</script>');
$('#debug').html('Time: <script>echo getTime();</script>');

How to show date on webpage?

Thx for replies. I’m unsure how to embed that inside jquery. Like this?

$('#mydebug').html('document.write("<strong>${Date()}</strong></h3>")');

Hrm, that returns nothing to the webpage. It also seems to break the other js.

Do i need to configure something to recognize those backticks?

When i replace backticks with single-quotes, i get the following on the webpage:

${Date()}

This also returns a blank page:
$('#mydebug').html(document.write(Date());

This works:
$('#mydebug').html(Date());

Since i’m not using the dollar, i guess that means the Date() code is just javascript. I think your version is using jquery inside the jquery.

Maybe your jquery version fails cuz the DOM isn’t fully loaded? You can see i havn’t wrapped my jquery in $(function, so it’s not waiting for DOM to load.

not working, gives a blank page, plus remaining js doesn’t run:

$(function () {    
  $('#mydebug').html(`<strong>${Date()}</strong>`);
}());

Also failed:
$('#mydebug').html('<strong>'+${Date()}+'</strong>);`

$('#mydebug').html('<strong>'.${Date()}.'</strong>);`

Note, i’m doing all this inside MediaWiki.

MediaWiki js:
https://gunretort.xyz/index.php/MediaWiki:Common.js
starts at BEGIN POST TEST

Rendered page:
https://gunretort.xyz/index.php/Template:Scrap

JavaScript parse error: Parse error: Illegal token in file ‘MediaWiki:Common.js’ on line 11
(anonymous) @ VM3331:1
DOMEval @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:1
globalEval @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:4
runScript @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:162
checkCssHandles @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:162
execute @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:163
implement @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:169
(anonymous) @ VM3330:1
DOMEval @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:1
globalEval @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:4
(anonymous) @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:166
requestIdleCallback (async)
asyncEval @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:166
work @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:167
enqueue @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:164
load @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=05ngyvq:171
(anonymous) @ Template:Scrap:10
startUp @ load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector:28
script.onload.script.onreadystatechange @ load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector:28
load (async)
(anonymous) @ load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector:28
(anonymous) @ load.php?debug=false&lang=en&modules=startup&only=scripts&skin=vector:28

Is template literals the only way to pass jquery instead of javascript?

This works. That means jquery works in the passed HTML, correct?

$('#mydebug').html('<script>$("#mydebug").html("hello")</script>');
and
$('#mydebug').html('<script>$("#mydebug").html(Date())</script>');

i would not write it that way, just to get the date.

The point is, if i wanted to write some complex jquery to the page, instead of vanilla javascript, that is one way to do it.

Question now is, can i somehow eliminate the <script> tags, and still get the jquery written to the page so that it works.

yep, i mentioned above that one works for me. Sorry, comments get lost in the chatter.

Then i followed with method to write jquery to the page, in case someone wanted to do that.

Then i wondered if there was any way to eliminate those verbose <script> tags, in the embedded jquery method.

thx

Use new Date() to generate a new Date object containing the current date and time. You can use:

var today = new Date(); alert(today)
JavaScript codes work on jQuery too.

1 Like