I am trying to show current time with running seconds on a page under adminhtml. I wrote the code for js in Namespace_Module/view/adminhtml/web/js/timejs.js And the code is
define(
['jquery', 'uiComponent', 'ko']
,function ($, Component, ko) {
'use strict';
return Component.extend({
defaults: {
template: 'Pixelnet_Blog/time'
},
initialize: function () {
this._super();
this.currentTime();
},
currentTime: ko.computed(function () {
setInterval(function(){
var currentTime = new Date().toLocaleTimeString();
// console.log(currentTime);
}, 1000);
return currentTime;
})
});
}
);
To render the js function I created a PHTML in the place of Namespace_Module/view/adminhtml/templates/js_time.phtml and the code is
<div id="time_show" data-bind="scope:'time_show'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"time_show": {
"component": "Pixelnet_Blog/js/timejs"
}
}
}
}
}
</script>
</div>
I called the template in the phtml and put the template in the position of Namespace_Module/view/adminhtml/web/template/time.html. And HTML code is
<div>
<h4>Current Time is:</h4><span id="time_show" data-bind="text: currentTime()"></span>
</div>
lastly, I put a require js file in the location of Namespace_Module/view/adminhtml/requirejs-config.js and the code snippet is
var config = {
map: {
'*': {
timejs: 'Pixelnet_Blog/js/timejs'
}
}
};
But when I render the page it does not show the time with running seconds. In console, it shows an error named Failed to load the “Pixelnet_Blog/js/timejs” component. I cannot figure out the problem.