I have a stop button,when it is clicked it gets hidden but when I fresh the page the button does appear again.Is it possible to hide the button forever even if there is a page refresh here is what I tried
newContent += Hesto.Html.CreateTD('<input type="button" value="Stop" id="btnStopEvent">');
function GetEventId() {
$(document).on('click', '#btnStopEvent', function () {
var EventId = $(this).parents('tr').attr('id');
var Result = {
EventId: EventId
};
$(this).hide();
});
}
You'll have to persist the button's state somewhere else. Every time you reload the page, your code is re-loaded and any JavaScript variables that were set are initialized again.
You could do something with Local Storage, there are many tools that make using Local Storage easy, here is a very simple example:
// set the value and save it in local storage
localStorage.setItem( "stop_button_state", "disabled" );
// after page re-load, fetch the saved value
var button_state = localStorage.getItem( "stop_button_state" )
You could also use some sort of server side persistance, it could be a session variable (PHP) or even stored in a database of some sorts. You would then retrieve the setting before serving the page to the user.
Cookies might be good for this case. You already use jQuery, so try this plugin
https://github.com/carhartl/jquery-cookie
After that you need to write some simple logic to set cookie when button is clicked and check for cookie before clicking so that it wont show.
Localstorage is also good as someone already mentioned, if you aim only for moden browsers.
http://www.w3schools.com/html/html5_webstorage.asp
Related
i'm looking for a way to disable a start button on a quiz after its clicked and still be disabled if the user were to refresh the browser.
its quite a large script and everything I try seems to either disable the button without an input or do nothing.
You can create a cookie in the browser when the start button is clicked, and then check for that cookie, If the cookie exists set that button as disabled. even if the page is reloaded that cookie will be there and the start button will be disabled until the cookie is destroyed. You can create a cookie in js like this and set its expiry according to the requirement:
document.cookie = "username= your_username; expires=Thu, 18 Dec 2022 12:00:00 UTC";
You can try using localStorage to store persistent data, and then retrieve it when the page loads
const key = 'your_key_here';
const isDisabled = !!+localStorage.getItem(key);
document.getElementById('btn').disabled = isDisabled;
function handleClick (e) {
localStorage.setItem(key, 1)
}
<button id="btn" onClick="handleClick" />
Be aware that it will stay indefinitely in localStorage until you clear it
Try to keep a flag in cookie or session/local storage.
For instance, if you click the button on start of quiz, add click event listener to the button and inside of it push a variable in the cookie or session/local storage. You can then check for this variable in your script whenever your page loads. If the variable is present, disable the button using JavaScript else let it be enabled.
But be sure to check the difference between session storage and local storage before using them. They both have different use cases and will depend on what you need.
I want to add a automatic popup newsletter form to my static website(usinng google spreadsheet to collect mail). But when page reload every time popup shows up. I want something like if anyone press Subscribe or Not Now button popup will stop forever for their device. Is it possible?
I used this code. But When I reopen the browser Newsletter popup shows again.What I need to change here?
$(document).ready(function () {
if ($.cookie("dismiss") == null) {
$('.modal').appendTo("body");
function show_modal() {
$('.modal').modal();
}
window.setTimeout(show_modal, 300);
}
$(".close").mouseenter(function () {
document.cookie = "dismiss=true";
});
});
Thanks in advance.
You can tackle this using local storage. MDN Documentation
With local storage you can save information that is not lost after a refresh. (Similar thing can be done with cookies, but in this particular case I think local storage fits your use case)
So you can try doing something like this:
// save item
localStorage.setItem("isUserSubscribed", true);
// get item
localStorage.getItem("isUserSubscribed");
Note that local storage items that are not set will return a null value.
In short every time the page loads execute getItem() and based on that value run the logic that you need.
The context is a game. When user refreshes his page (F5 or ctrl+R), I want the page to be redirect to gameOver.php page.
Can this be done in pure JS ?
One way to go about is to use a cookie variable as a counter. Every time the user starts the game, you set it to 1 and then increment it on every page load. On page load, you can check the variable's value and redirect using
window.location = 'gameOver.php'
or you can use beforeunload event.
$(window).on("beforeunload", function() {
//your redirect code logic here
})
You can do easily with this code when you want solve with pure javascript:
window.addEventListener("beforeunload", function (e) {
window.location = "gameOver.php";
});
Or you can do with jQuery like below:
$(window).on("beforeunload", function() {
window.location = "gameOver.php";
})
To solve this problem you could use cookies.
As mentioned in this stachoverflow thread, you store a cookie the first time someone visits your page. If you check on every page load if the cookie is set, you can detect if somebody has reloaded the page.
If you plan to create a "Play again" function you can simply destroy the cookie.
To get a look of the code look to the linked stackoverflow question above!
use cookie or localstorage first time someone visits the page. On refresh the check if your cookie or localstorage value is exists and if it does then redirect them to gameOver.php using javascript.
function checkUserVisit() {
if(document.cookie.indexOf('visit')==-1) {
document.cookie = 'visit=true';
}
else {
window.location = "gameOver.php";
}
}
call this function on body load of page.
<body onload="checkUserVisit()">
I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.
I have two buttons, "Yes" and "No". If user clicks on "Yes", I want to display a message that needs to be permanent.
Eg - I click on yes,the message should stay even after page reload or the next time the user logs in. It shouldn't appear again. Maybe possible if i delete the file or something.
I am able to hide all elements using hide() and then display a msg, but onpage reload, they come back..
Can you guys help?
Thanks
This is possible using html5's localstorage (but I've no experience in using that), or using the jQuery cookie plugin.
$(document).ready(
function(){
var msg = $.cookie('yesMsg');
$('#messages').text('yesMsg');
$('#messageSelectionDiv').click(
function(){
$.cookie('yesMsg',$(this).text() {expires: 30});
});
});
If the browser you are targeting supports HTML5, You can use HTML5 localStorage, otherwise cookies, to store some permanent data for the user.
For example:
if (localStorage['show_something'])
// Show it
else
// Hide it
To store it initially, you just set it:
localStorage['show_something'] = true;
For more info, refer to this awesome doc:
http://www.html5rocks.com/tutorials/offline/storage/