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?

There is no built-in function named getDate. If you look at your browser’s console (Ctrl+Shft+J in Chrome), you would see something like the following:

Uncaught ReferenceError: getDate is not defined

Review variousexamples of creating and displaying dates to see how you can accomplish what you want.

You were closer with the attempt above, but you should have been using either straight or double quotes.

Change the following:

document.write(“<strong>” + (new Date()).toString() + “</strong>”);</script></h3>');

to the following correct syntax:

document.write('<strong>' + Date() + '</strong></h3>');

or using a Template Literal:

document.write(`<strong>${Date()}</strong></h3>`);
1 Like

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

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

In your code above:

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

it is not necessary to use document.write if you are using the jQuery html method. Also, the use of a backtick ` is only used with the Template Literal (the 2nd example I showed you above) and you would only used them at the start and end of a string section where you want to also embed JS.

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

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.

The code below (same as what I posted above) will work.

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

The ${Date()} part is Template Literal syntax which you can read more about here.

The following will not work, because you are missing a ) before the semi-colon. But like I said before, it is not necessary to use the document.write because Date() will suffice inside the html();

$('#mydebug').html(document.write(Date());

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

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

Do you see any errors in the browser’s console (Ctrl + Shft + J in Chrome)?

Better yet, can you post a url to your entire code, so we can see all the parts (HTML, CSS, and JS)?

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

Never used mediaWiki before, so maybe they do not support the use of Template Literals?

Just stick with:

$('#mydebug').html('<strong>' + Date() + '</strong>');

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

No, a Template Literal is a newer feature of JavaScript and unrelated to jQuery. The last code I posted does not use a Template Literal.

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 guess so, but I do not understand why you would want to write it that way. It is your code, so you can do it how you want.

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.

I guess I must be missing something. What happens when you write the following?

$('#mydebug').html(Date());

It should display the date/time in the element with id=“mydebug”. But then again, there maybe some strange mediaWiki behavior here preventing it from working. The code above will work in a normal page with jQuery added.

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