I have a Vue3 site designed to hold embedded tableau dashboards. When a user clicks a link on the menu page, a page opens that's basically an empty shell. With the link's props, I fetch a tableau token, construct the api call, and populate a div with the response. Starting a week ago, the site's doing something new, and it's happening the same on Chrome, Firefox, and Safari.
This is what happens now: the user clicks a menu link, frame page opens with requested report. If they return to menu and click new link, the frame page re-opens and immediately the page fires the api call from the previous visit. (There's nothing in Store or cookies that saves the url the page constructs on-the-fly, so I'm not even sure where the browser is getting the full url for that re/call.) Since tableau's tokens expire in seconds, this re/call fails -- meanwhile, the page continues, constructing the new (correct) url+token and retrieving the requested dashboard.
So in the embed div, now there's one dashboard reporting an error b/c the token expired -- and if the user scrolls past that, they'll see a second dashboard in the div, and this is the one they actually requested.
On top of all that, this ghost api call doesn't change. If the first call was for reportA, and the user leaves-and-returns for reportB, the frame page calls reportA at the top. If the user leaves-and-returns now requesting reportC, the frame page still calls reportA at the top -- and it'll keep doing that even if the user revisits with a reportA request. The only way to clear it is by refreshing the page (and then it just starts all over again).
For now, I'm weaseling around the issue like so:
created() {
if (this.$cookie.getCookie('redo')) {
console.log('B) remove cookie');
this.$cookie.removeCookie('redo');
} else {
console.log('A) set cookie');
this.$cookie.setCookie('redo', true);
location.reload();
}
Which is less of a solution and more of an unhappy hack to plug the dam while I figure out where all the water came from. What's especially weird is when I backed up to a commit from before the problem first appeared, the site still does the ghost call. I've broken a lot of sites in a lot of crazy ways in my years, but I've never run into a case like this, and I haven't the first clue how to solve it, because I haven't the first clue what's causing it.
Any and all help is greatly appreciated. /tears hair
Related
TL;DR: My page crashes because slow API call doesn't give necessary data to a function that loads a table. Current workaround is setting delay on buttonclick table open, but unnecessary if the page has been open for a couple of seconds.
So I've implemented an MUI datagrid component in my project that works great, except for one catch.
The API call to retrieve the rows for the table takes a while, and as such the getRowId functional prop of the datagrid doesn't have a list fed into it initially to generate unique rowIds (necessary for an MUI datagrid to render properly I guess), therefore if a user opens the table (it's in a modal) too soon after loading the page, the page crashes.
My current workaround is that when the user clicks the button to open the modal, I setTimeout(openModal(), 2000). This works fine, but isn't necessary if the user has had the page open for a second or two. There would be no real reason for the user to open the modal right away, but I just don't want the page to crash in the case that someone does.
The question: Is there a way to track how long the page has been open for? So that I could, say, only setTimeout if the page has been open for less than x time?
One idea I had was to set it so that the button to open the modal is disabled on mount (useEffect() in this case) for X amount of time, and then enabled, but that seems kind of ugly.
Does anyone have a better idea? Or a completely different way to do this?
I can post code if necessary, let me know.
Thank you :)
I have a loading screen that is basically a modal over my index page. I only want it show up when a user comes to my site initially. The screen isn’t really important for functionality, but when things load on the index page, images and other things flicker around a bit depending on a few variables I can set using url params. I want to have a nice, clean user experience for the first load at least.
But after the first load, the loading screen gets annoying as it covers the homepage each time it is loading.
I have used document.referrer for the time being, so at least if the home menu button is clicked, I can detect that. But the issue I am facing is if a user uses the back button.
I thought about using local storage, but the issue with this would be that if a user is on my page, goes to another website and then comes back, I would like to start with the loading page again. If I set a session cookie that wouldn’t happen.
I’m thinking the best solution is to set a cookie that lasts for about 30seconds to a minute for each page visited. I can write the code to do that, and am not asking for help with that, I’m just wondering if there is a better way to do it.
Hey, i just noticed something on facebook.com, facebook was in my other tab, and i was browsing on SO, after a while i switched back to facebook.com and it like fades in new news in the wall. How did they make a script that knows when you are active again without clicking anywhere it shall refresh new messages etc. ? Just like facebook chat also if you have it on another tab/window then you'll hear "blub" or Facebook: **NEW MESSAGE FROM: name. How does it do that?
Do it run a timeout checker each second, i dont think so ? , that would be really alot of traffic and server response time, if around 3-4-500 million users would do that each day.
Could someone provide example where to place ajax call if it the user has left the focus and its getting onfocus again, how to make a code that runs a ajax call there? jquery?
Would this not work using the focus event on the window object? ie:
window.onfocus = refreshStuff;
where refreshStuff is your function for refreshing...err...stuff.
https://developer.mozilla.org/en/DOM/window
http://msdn.microsoft.com/en-us/library/ms536934(v=VS.85).aspx
Sorry - I would have added this to the comments, but I can't - possibly because I don't have enough reputation yet.
How do I insert an entry into browsing history so back button goes to different page 1st click then original page on 2nd click?
So if you need a good explanation of what I want done, go to:
https://secure.exitjunction.com/howitworks.jsp
I just need a script that will allow me to insert an entry in the browsing history so when back button is hit, the user will be taken to my special page.
Here is a link to a jQuery Plugin:
jQuery Plugin
You can't directly manipulate the browsing history.
Such a feature would be seen as a security hole (and it would be), so I doubt that any browsers would ever implement it.
You might be able to hack around it however by doing something like this:
NOTE: This entirely hinges around the assumption that the referrer will get changed by the back button. I don't think this actually happens, so it more than likely won't work, but hey.
You have two pages, PageA and PageB.
The user hits PageA
The page (on the client, using javascript) checks the HTTP referrer, and if it is not PageB, then it immediately redirects the user to PageB.
Now that you're on PageB, if the user clicks the back button, it will go back to PageA.
PageA will check the referrer, it willmay be PageB, so there is no redirect.
I'm using an iframe to display content that has links. When the user clicks around in the iFrame and hits "back," it goes back in the iFrame. This behavior is OK. However, once they're back to the first page of the iFrame and they hit "back" again, the entire window is taken back to the previous page. This is unwanted.
To prevent this behavior, I've put a fake "back" button within the iFrame. (In most cases this is bad UI, in this case, it works well). I'd like this fake back button to only go back if the previous page is the iFrame's page -- not the entire page. When they hit the fake back button in the iFrame, it should only move that iFrame back, nothing else. Is there a way to do this? Does an iFrame get its own history object?
Something that might be of benefit: the domain of the iFrame and the main window can be assumed to be distinct. So, if it's possible to read the "global" history object, I can check to see if the previous page was mine by checking to see if the domain is mine. If the domain is not mine, the fake back button will be hidden or not do anything.
Help greatly appreciated, and happy holidays!
document.location.href = document.referrer;
You should be able to use the javascript history object to push the user back; but you won't be able to stop it when the iframe-clicking runs out and the main page wants to go back. And you can't stop it because that's intentionally locked down pretty well in most browsers to prevent people from messing around with it maliciously.
You could write your own history tracking code and have the back button pop items off that stack, stopping when the stack is empty...
If you're using some complicated nesting of links - perhaps some javascript-based tree menu? That way the iframe never has a page refresh?
Without having an example, I have to say your design seems like poor UI... when I hit back, I don't want the navigation to change; I want to go back to whatever page I was just on.