Is there a way to dynamically add or modify a JavaScript timestamp component after the webpage has finished loading?

Context: Utilizing the SailsJS framework to showcase the timestamp of data model updates. The framework, originating from 'parasails', leverages Vue.js and offers the 

<js-timestamp :at="1573487792252">
component to display elapsed time like "a few seconds ago" that dynamically updates over time. Meanwhile, real-time updates are pushed from the server to the browser via WebSocket, prompting the need to synchronize the <js-timestamp> with the updated reference timestamp.

Issue: Upon initial page load, parasails replaces the <js-timestamp> tag with a 

<span parasails-component="js-timestamp">
, displaying the static "time since" message instead of the actual timestamp value. Efforts to manipulate this using JQuery have proven ineffective as the dynamic updating functionality is lost. Reviewing the source code of the js-timestamp component reveals the use of moment(this.at).fromNow() for generating the "time since" text within 24 hours, but manual replacement disrupts automatic updates.

Query: How can the timestamp be seamlessly updated to ensure continuous dynamic message updates by parasails or Vue.js?

javascriptvue.jssails.js

Answer №1

After some experimentation, I discovered a simple solution in the JavaScript code linked to the page. By defining a variable and assigning it to the js-timestamp :at attribute instead of using a static number, the page can now dynamically update alongside the variable.

So instead of hardcoding:

<js-timestamp :at="1573487792252">

I have implemented this method:

<js-timestamp :at="model.updatedAt">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

javascriptjqueryhtmlcss

Developing a Node.js and Express REST API for generating tailored routes for custom fields

I'm currently using node.js and express framework to build my REST API server. One of the features I want to implement is similar to the Facebook graph API, where I can pass specific fields in my API routes like: /me?fields=address,birthday,email,do ...

javascriptnode.jsrestexpressnpm

In Javascript, objects within local scope cannot be accessed from nested functions

I'm currently working on a function that is meant to retrieve an object from a PHP file located on a different page. I've implemented the jQuery ajax function to handle the JSON retrieval, and it seems to be functioning as intended. However, I&ap ...

javascriptjqueryajaxfunctionlocal-variables

Required environment variables are absent in the application form

Currently, I am working on developing a Next.js application and implementing CRUD functionality. However, I encountered an error while creating the "Create" page, which seems to be related to environment detection. Just to provide some context, I am using ...

javascriptreactjsnext.js

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

After exhausting countless Google and StackOverflow search results, I have come to the conclusion that seeking help is my best option. I am currently developing a Symfony2 application. In every view of my app, I have integrated a Twitter Bootstrap modal e ...

javascriptjqueryajaxtwitter-bootstrapmodal-dialog

Substituting text in a document by utilizing two separate arrays: one holding the original text to be found and another storing the corresponding text for

I am facing a challenge with replacing specific text strings in a file. I have two arrays - one containing the strings that need to be located and replaced, and the other containing the replacement strings. fs.readFile("./fileName.L5X", "utf8", function( ...

javascriptnode.jsfs

Unlocking the potential of Three.js with mouse picking

I am looking to implement object picking in the following code snippet: var Three = new function () { this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) this.camera.po ...

javascriptthree.jsmouse-picking

VSCode is experiencing issues with recognizing .env* files for markup purposes and is also failing to recognize .env.local.* files

Current Environment: Utilizing NextJs, React, and VsCode Noticing a problem with syntax highlighting in my VSCODE editor. I have installed the following extensions: ENV DotEnv As per suggestions, I updated my json configuration file as follows: " ...

javascriptreactjsenvironment-variablesnext.js

Why isn't Gzip compression working in webpack? What am I missing?

After comparing the compression results of manual webpack configuration and create-react-app for the same application, it became clear that create-react-app utilizes gzip compression, resulting in a significantly smaller final bundle size compared to manua ...

javascriptreactjstypescriptwebpack

To implement the replacement of text with a selected item in AngularJS, simply

I have a dropdown in my HTML: <div class="dropdown"> <button class="dropdown-toggle" type="button" data-toggle="dropdown" ng-model="yearName">Filter by year <span class="caret"></span></button> < ...

javascriptangularjs

React frontend communicating without backend server

Is it possible to send a message between two frontend users on web applications built with React? ...

javascripthtmlreactjs

Sending multiple objects using Ajax and fetching them in PHP

I'm facing an issue with posting a form and an array to my PHP script. My current approach involves using the following code: var json_data = JSON.stringify(data_vendor); //array to be posted $.ajax({ url: &ap ...

javascriptphpjqueryajax

Discovering image file extensions in JavaScript using regular expressions

Can anyone provide me with a javascript regular expression to validate image file extensions? ...

javascriptregeximage

Animating CSS with jQuery for a background image effect

I have the following JavaScript code : $(".linksColl a li").hover(function () { $(this).css({ "background-image" : "url(images/links/linkHover1.png)", "background-position" : "center center", ...

javascriptjquery

Encountering an issue while trying to set up fs-ext with npm: error C3861: the 'fcntl' identifier cannot be

I encountered an error while trying to install fs-ext on my Windows 10 64-bit machine with Node.js v8.1.3 and npm v5.4.0. Any recommendations on how I can successfully complete the installation? PS C:\users\desktop\auth> npm install fs-e ...

javascriptnode.jsnpmnode-modules

Two separate occurrences hold identical values

I'm encountering an issue where instantiating a class two times results in the second instance retaining parameters from the first instance. Here's a simple example: var Test = function() {}; Test.prototype = { bonjour: null, hello: { h ...

javascriptnode.js

"Utilize Vue.js to dynamically add a CSS class to a targeted

I'm currently working on developing a basic task list where I want to mark tasks as done by clicking on the <li> element. The goal is to add a specific class to the clicked <li>. Unfortunately, I couldn't find a solution in the docume ...

laravelvue.js

What is the process for moving the final character to the beginning of a string?

Initially, the last letter in the string is being displayed. How can I rearrange it so that the last character appears first in the value? https://i.stack.imgur.com/uGq6H.jpg contentHtml += "<td rowspan1=\"" + 1 + "\" class=\"" + ( ...

javascriptjqueryjavascript-objects

After stopping the interval with clearInterval(), you can then use the res.send method

I need to continuously log the current date and time to the server console then stop logging after a specified time, returning the final date and time to the user. How do I properly utilize ClearInterval() in this scenario? const express = require(" ...

javascriptnode.jsexpresssend

Filtering data in Asp.net MVC 3 and converting it to JSON format

For my asp.net mvc 3 project, I'm considering the best approach for handling data: should I pass all the data via JSON and filter it with JavaScript, or should I filter the data first and then convert it to JSON? If filtering the data before passing ...

javascriptasp.net-mvcjson