There seems to be a problem with the JS state where it changes but then reverts back to its original state when the tab is closed and restored using cmd/ctrl + shift + t.
Typically, data is fetched from the server via ajax using Vue's mounted() lifecycle hook when the page loads. However, upon restoration of the tab, the data is loaded as it was during the initial load, rather than fetching it again through the API.
This behavior is intentional - Ctrl-Shift-T functions similarly to Ctrl-Tab in that it switches tabs without refreshing the content.
To achieve a similar effect, you can follow these steps:
1) Assign each request a random unique ID on the server-side, which is accessible in JavaScript
2) On unload (or beforeunload, test both), add the ID to an array cookie tracking unloaded IDs
3) Upon load, check if the ID is in the array cookie. If present, the tab was unloaded before reloading. The load event seems to be triggered by Ctrl-Shift-T
4) Remember to occasionally clear out the cookie ID array (and possibly store additional timestamps)
You can also experiment with using window.sessionStorage instead of cookies/local storage for this purpose; I personally have not used it enough to fully trust it, but the concept remains the same - mark when the window is unloaded and check upon loading.
Here are some alternative solutions that might also be effective for your situation:
1) One method is to utilize the window.history API on page load in order to append a unique slug to the URL, like #dorefresh. Then, during subsequent page loads, you can check for the presence of this slug and trigger a refresh if necessary.
OR
2) Another approach involves adding a timestamp when the page is generated (ensuring it's in UTC to avoid timezone discrepancies). Upon each page load, you can compare the current load time with the generation time to determine if a refresh is needed. This method has its limitations due to potential time discrepancies and may not be suitable for cacheable pages.
OR
3) To address stale AJAX requests, consider including a no-store header in the AJAX response (specifically for the AJAX response, not the main page) to prevent browsers from storing a cached copy of the data.
I am currently working on adding an "OnThisDay" feature in my Nextjs project, inspired by Wikipedia's style of displaying events that happened on a specific date. To achieve this, I have implemented a function structured like the following code snippe ...
Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...
<select id='city' name='city' > <?php $dbcon = mysql_connect($host, $username, $password); mysql_select_db($db_name,$dbcon) or die( "Unable to select database"); $city_query = "SELECT city,county FROM citycatalog order by city ...
I am currently working with a react component that handles login requests to my server. This component is housed within a modal using Material UI. <TextField onChange={handleChange} autoFocus name="email" ...
I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...
Recently, I've been tinkering with the Yandex Translate API in conjunction with VueJS to determine the language of input text asynchronously. So far, everything is functioning correctly. However, there's a unique issue that arises - the console ...
Currently, I am utilizing nightmarejs and facing a challenge that I am struggling to resolve. After using the goto(URL) command, I then proceed to use the evaluate() command to execute specific operations on the webpage. However, I have noticed that while ...
const handleDownloadImage = async () => { try { const canvas = await html2canvas(cardRef.current); console.log(cardRef.current); const imageData = canvas.toDataURL("image/png"); setImageUrl(imageData); } catch ( ...
I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...
I am encountering an issue with an IFrame inside a DIV where the SRC attribute is being dynamically set by a JavaScript function. When the SRC is set to "file.jsp", an onload function within the file.jsp containing style adjustments was causing the IFrame ...
Hey there, I'm currently working on implementing a notification system but have hit a roadblock. I've sent an invitation to a user to join the club. socket.on("notify", async (message) => { // invite the user John Doe io.to('socke ...
I have a challenge to create a code that can switch the case of text entered by the user. Here is what I currently have: var num; function toggleTextCase(str) { return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase( ...
When I try to navigate to a specific dom element on another page, the page initially works fine but then jumps to somewhere before that element. I believe this issue occurs because the page calculates the position before images load, and once the images ar ...
After creating my own React component as an NPM package and publishing it on NPM, I encountered an error when trying to import and use it in other Create React App (CRA) projects. The error occurs when running npm start in the command line. See the screens ...
Looking to access environment variables in Node.js with Webpack? When trying to access them using process.env null values are returned. ...
Having an issue with ChartJS while creating a chart using angular. The problem arises when navigating to a new page and then back to the original one, as the JavaScript is not triggered again. Is there a way to automatically invoke a JavaScript function o ...
Having recently started Unit Testing with vue, I am currently working on unit testing a navigation vue component. My initial goal was to test a method that simply sets a boolean value to false upon clicking. Utilizing vuetify, I attempted to replicate a bu ...
I desire the ability to create an instance of a model using a constructor while also providing injected services to that model. To clarify, I envision something like this: var book = new Book({ id: 5 }); // creates instance, sets id = 5 book.makeHttpCa ...
Here is the code snippet I am using for data validation in jQuery: return /^(?=.*[A-Za-z0-9/\$#.-_])[A-Za-z0-9/\$#.-_]$/i.test(value) The requirement is that the value should begin with letters or numbers, or a combination of both. Afterwards, ...
Currently, I'm working with a JSON file and need to extract the fileName tag for use. { "dataset": { "private": false, "stdyDscr": { "citation": { "titlStmt": { "titl": "Smoke test", "IDNo": ...