How to show date with inline jquery?

How to show date with inline jquery?
0.0 0

#1

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?


#2

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.


#3

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>`);

#4

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

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


#5

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>`);

#6

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.


#7

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());

#8

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

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

#9

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)?


#10

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


#11

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

Just stick with:

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

#12

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


#13

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.


#14

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>');


#15

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.


#16

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.


#17

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.


#18

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