I have a very peculiar scenario.
After saving my web page i.e after my POST request is successful, my buttons do not work for the first click.
After having the first click on any part of my web page, my web page starts working fine. Actually, the API calls doesn't happen on the first time. It happens only after the first click. This gives me an error popup, as written in code.
I am using backbone.js, javascript, jQuery, underscore.js, marionette.js, backbone stickit, etc.
So my question is
1. how to reload my web page so that it redirect to the same page with same tab openings and everything.
location.reload(true) or location.reload()
takes me to my home page instead of the page I was in.
Where to call this reload method, after onRender of that page or immediately after save button has completed its work.
** it seems that the web page looses focus and after having one click at any where on the web page, it brings the focus back.
EDIT
I also have an alert message on my web page stating that the changes are successful. Can I possibly create a disabled screen when that alert message comes, and make that screen enable only after first click at anywhere on the screen. If yes, can anyone help me to achieve the same.
EDIT II
I went through the whole scenario, debugged till ajax called the API, and I found out that in first click after save, my collection is being cached, and hence ajax never calls the api, whereas in the next click the the cache gets deleted magically, since I don't know yet from where, and the calls goes. So, is there any way I could stop this caching from being done.?
$.ajax= function(options) {
if ('GET' == options.type) {
if (false !== options.cache) {
var url= options.url+'?'+JSON.stringify(options.data); // not the real url, but an incredible simulation
return readCache[url] || (readCache[url]= oldAjax.apply($, arguments)).fail(function() {
delete readCache[url];
});
}
} else {
readCache= {};
}
return oldAjax.apply($, arguments);
};
readcache[url] is true for the fist time, and hence oldAjax.apply never gets called, whereas the second time it is false.
the code is from backbone-extension.js
Related
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
I've got a parameter which indicates if it is the 1st time user have logged in and if it is:
mounted: function() {
if(this.$route.query.welcome == 'true') {
$('#welcome_dialog').modal();
}
}
a modal shows up which has few steps with some introduction and explanation text. On the last step, there is a button which, when clicked, redirects user to another webpage. The problem I've got is, once the user finds himself on the redirected page, if he decides to click on the back arrow in browser, the URL still has the welcome parameter which means that user will have to go all over the same procedure with the #welcome_dialog again.
My question is, is there a way to remove this parameter from URL if back arrow is click, or just is there any other way not to show dialog this time? You don't have to post code if you don't want, I am more looking for an idea on how to do this.
P.S.
Opening webpage in new tab is not an option.
You can store the welcome value in local storage or cookie and then read it every time you load that page.
My web app has multiple html pages. On a given page (let's call it page A), a user can make edits to a form. My current method of checking for edits, when the user navigates to another page in my app, is to use the js script below.
$(window).on('beforeunload', function () {
if (changes == true) {
return "this won't show, as the browsers won't show a custom message for security reasons, but is required";
};
});
When I navigate to another page (let's call it page B) in my app the first time, this works just fine. However, if I return to page A and make another round of edits, even though the function above runs and my variable 'changes' is true, the browser does not display the warning message that you are navigating away. Apparently this is because page B is already cached. I am assuming this, because if I force a reload of page B and go back to page A and navigate away, the browser properly displays the warning message.
What is a better solution to ensure the user is always warned they are navigating away from a page with unsaved changes, when navigating to another page?
Update: This is working for Chrome, but not for Safari.
I'm currently writing a javascript program, and I'd like to refresh a web page, and then proceed to call a function that modifies the newly refreshed page afterwards.
However, whenever I call location.reload(), the page ends up performing the actions prior to the refresh, despite the fact that I've placed them after the refresh in the code. How would I go about getting the page to form actions after a refresh?
You can cheat to do this using sessionStorage:
//in some function:
sessionStorage.setItem('onReload', 'doFn1');
location.reload();
//elsewhere, to be called on page load:
if(sessionStorage.getItem('onReload') === 'doFn1') {
sessionStorage.setItem('onReload', '');
// do your code
}
Ultimately, though, this isn't a good practice. Why are you reloading the page? You can probably accomplish what you want without a page reload.
Javascript doesn't continue executing after page reload, it starts fresh.
If you really need to refresh the page and then start a specific action you'll have to have to have some way to tell your code to start from where it left off.
One way to solve the problem is to add a hash to the url, which will serve as a flag to continue execution.
window.location.href += "#continueScript";
location.reload();
then in your function check for the hash.
if(window.location.hash == "#continueScript") {
continueMyScript();
};
In my ASP.NET WebForms page I have a Modal window that pops up. The javascript code for displaying this modal window is as follows:
function OpenMailAddressWin(subscriberContactRelationGid, routeId, btn) {
window.showModalDialog("SubscriberSecondaryAddress.aspx" + BuildQueryStringValuesForSubscriber(subscriberContactRelationGid, routeId, returntxtReceiptDate().value), this, strWindowFeatures + ";scroll:no;dialogWidth:442px;dialogHeight:350px");
location.reload(true);
}
After the modal window is closed I need to refresh the parent page (hence the location.reload(true); statement at the end) in order for alterations made in the modal window to take affect.
Now the thing is that sometimes (not every time, infuriatingly) when I close this modal window I get a warning popup which says:
" To display the webpage again, Internet Explorer needs to resend the information you've recently submitted.
If you were making a purchase, you should click Cancel to avoid a duplicate transaction. Otherwise, click Retry to display the webpage again."
Any ideas why this is happening?
This is the double-submit problem in browsers.
When a page is loaded using POST request and you try to reload the page using location.reload(true);, the browser needs to send another POST request to the server and this may cause problems as POST is supposed to change state on the server. Therefore, the browser needs confirmation from the user. To solve this problem, we usually use POST-REDIRECT-GET pattern.
In your case, just simply using location.href = location.href should solve the problem as this will reload the page using GET.
This occurs when you try to return view(Model) from your POST request. Actually you cannot return a view from POST request because returning a view is supposed to be a GET operation and it must be done under GET request.
So after posting your data successfully and saving the data in database , you have to use ReturnToAction in your controller and return your final view from that action method.
Also If you want to refresh your page, you must use location.href = location.href instead of window.reload(), because location.href will get the data through GET request.
You can create a setTimeout function like this.
This will not give you any
setTimeout(function () {
window.parent.location.reload();
}, 100);
The Alert Message shows when refreshing a page in IE by using
That works... When you want to refresh the parent page.
This might be a valid soultion:
window.opener.location.href = window.opener.location.href;
I faced the same problem while calling modal window.
I removed location.reload and just returned true value from the function.
This solved my problem.
In my case I had something totally unrelated reloading the page, someone put some javascript code to reload the page in case of resize and it was always being triggered on document.ready, making it do the post request twice, so if none of the solutions here work just make sure that there isn't some random javascript reloading the page without you knowing about it, may be useful press F12 and check the network tab to see if something unexpected is being called.