Is there a way to know if the user just opened the page? I got a textbox in my app that will retain its value even if the page was refreshed or submitted. What I want to do is to remove the content of the box when the user just accessed the page because what's happening right now is that whenever I close and rerun the page, the value of the textbox before I closed it is still there. Can you help me out?
localStorage does it for you:
var element = $("input[type='text']");
var message = "This is the first time !";
if (localStorage.getItem("onlyOnce")) {
element.val(""); // clear value
}
else {
localStorage.setItem("onlyOnce", true);
element.val(message);
alert(message);
}
You can use together with the above:
$(window).on("beforeunload", function() {
localStorage.removeItem("onlyOnce");
});
Hope it helps.
You can add this script in document.ready function.
<script>
$(document).ready(function(){
$("input[type=text]").val("");
});
</script>
Related
I have a Load button and I am calling onclick event on that button which would refresh the page using window.location.reload() . But ,what I want is that the reload should only be called when the button is clicked for the first time . From the second click and till the HTML page is active the reload should not be called .
How can this be achieved with javascript ?Any examples would be helpful.
You could use local storage or session storage to do that. This is a modern approach that makes use of Web Storage API.
In this case, you may set a property in the storage to hold the button click and only do the refresh if it is not yet clicked.
It is possible to do it like the following snippet:
$('button').on('click', function() {
// will return null at the first call
var buttonClicked = sessionStorage.getItem('isButtonClicked');
// will only enter if the value is null (what is the case in the first call)
if (!buttonClicked) {
// set value to prevent further reloads
sessionStorage.setItem('isButtonClicked', true);
// reload the page
window.location.reload();
}
});
A more detailed example on the web storage API can be found here, if you want to know more details about it.
One way to handle this would be changing the action that onClick performs. Try taking a look here: Change onclick action with a Javascript function
You can try sending a parameter on the first reload and using that parameter change the action of the button.
Something like:
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
var secondReload= getQueryVariable("secondReload");
if(!secondReload){
//if button clicked
window.location.reload();
}else{
//deactivate button
}
</script>
you need to add a disabled attribute on the button tag within the click event.
Reloading the page only once on a button click
if you're using jQuery, something like this.
$('button').on('click',function()({
... your code here
$(this).attr('disabled');
});
This may be a duplicate question but there is one thing I need to know and I wasn't able to find it on any other questions.
How can I pop up an alert box when the browser's refresh of back button is clicked but not any other buttons like homepage, etc. that refirects the page to another page?
I was able to make an alert box using this code:
<script type="text/javascript">
window.onbeforeunload = function() {
return 'If you resubmit this page, progress will be lost.';
};
</script>
But when I click on my homepage button, which loads the page to another page, the alert box still triggers. I need the alert box only for the refresh and back button of the BROWSER.
Any help is very much appreciated. Thanks in advance. :)
UPDATE
This is the code that works with jsfiddle.net but not with my browser.
<html>
<head>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage" href="something.php">
</form>
</body>
</html>
Now my questions is what can be the reason why it's not working in my browser but works with jsfiddle.net? Is there something that i missed? Something to configure, etc? Thanks.
JSFIDDLE LINK: http://jsfiddle.net/bawvu7yy/4/
Determining what was clicked on to trigger navigation is only possible if the button clicked on exists within your document. Assuming this "homepage" button is an element in the document in question, perhaps you can use a flag to keep track of if that button was clicked on.
// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
That way the popup only happens when anything else causes the page navigation.
EDIT: I've provided a working demo on jsfiddle of this. The link does not trigger the popup, but the other two buttons which behave exactly like "back" and "refresh", do trigger the popup. In this update, clicked = true; is commented out and this shows that the popup begins to appear for the Home button as well when this is not executed.
SECOND EDIT: You're running the script before the element exists. Move the <script> tag with the JavaScript inside to the bottom of the <body>.
Just use window.onbeforeunload function in javascript use the code below.
<script type="text/javascript">
window.onbeforeunload = function() { return "Are you sure you want to leave?"; }
</script>
Hope this helps you
I have an Ajax call that is run when a div is clicked. This displays a dynamic drop down menu. Below is the ajax call.
The drop down menu contains a list of other items that can be clicked to launch an "editor". The issue is that when I close the editor I request the user confirm they want to navigate away from the page, based on the answer the div will either close or remain open for further editing. Below is the code that launches the editor:
jQuery(function($){
var launchEditor = "#launch-editor-<?php echo $this->section_num; ?>";
var contentEditor = jQuery("#<?php echo $this->section_num; ?>-editor");
var closeEditor = "#<?php echo $this->section_num; ?>-editor-close";
var closeMessage = "Your changes will not be saved, are you sure you want to close without saving?";
jQuery(document).on("click", launchEditor, function(){
contentEditor.unbind();
contentEditor.show("fade", 1000);
contentEditor.draggable();
});
jQuery(document).on("click", closeEditor, function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
//contentEditor.die("click");
} else {
}
});
});
The issue is as follows... If I click on the initial div more than once which launches the AJAX call, the "jQuery(document).on("click", closeEditor...)" function bubbles up in the DOM which poses a problem when the user decides to close the editor. Effectively the "confirm" message displays equal to the amount of times the original div is clicked. hope this makes sense... let me know if further info is required... cheers.
Following seemed to fix it.. thanks SCRAGAR for your suggestion:
closeEditor.one().bind("click", function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
} else {
//do something
}
});
In checkout page of my magento store, I need to clear some inputs when an alert box is showed and user press OK. Is possible to do that?
I have no control over the javascript alert. So I think in a script that detect an alert with a specific message and clear inputs when button of that alert is clicked.
UPDATE
Fixed!
file: opcheckout.js
line: 888
I add location.reload(); because document.location.reload(true); not work on IE. Thanks everybody!
Probably try overriding default alert and write a custom function like below,
var c_alert = alert;
window.alert = function (str) { //override default alert
c_alert(str + ' my message');
location.reload();
//or write code to clear input fields here
}
//below seems to be triggered from somewhere where you don't have control.
alert('test');
Javascript
if(confirm('your confirmation text')){
document.location.reload(true);
}
Make it refresh after the alert. The javascript code shouldn't execute before the alert is gone
How do check if a the user has the browser's tab/window currently on our page
function userisonourpage()
{
//do something
}
And when a user switches the tab/window to our page ?
function tabswitched()
{
//dom something here too
}
Just like in many places u switch to the page and the title changes i know the title can be changed with : document.title
but dont know how to implement those functions.
Thanks :D
You could do this:
$(document).ready(function(){
$([window, document]).focusin(function(){
//Your logic when the page gets active
}).focusout(function(){
//Your logic when the page gets inactive
});
});
Hope this helps. Cheers