I have this tiny script for now that checks if any change is made on the form. If there is a change
then I set a flag to 'Y'. I call this function on onBeforeunload="changeConfirm()" places in the body tag. I know
I can't stop the user from closing down the window, but how do I make this scenario work where he made a change
-> decide to close the window -> Script alerted him -> User clicks cancel (Now I need to bring him back to the screen
instead of closing browser.
<script type="text/javascript">
var Flag= "";
function changeConfirm(){
if(Flag == 'Y')
{
var confirmStatus = confirm('Changes made. Dont want to save?');
}
else {
alert("No changes were made " + Flag);
}
}
</script>
Try this :
function confirmChanges() {
if(Flag == 'Y')
{
if(confirm('Changes made. Dont want to save?')){
return false;
}else{
return true;
}
}
else {
alert("No changes were made " + Flag);
}
}
It should be like this:
window.onbeforeunload = function() {
if ( Flag == 'Y' ) {
return "Changes made. Don't want to save?";
}
}
Related
I have a checkbox (which uses the Bootstrap Switch library to act as an on/off toggle) to activate and deactivate users with the help of AJAX.
When a user unchecks the box this function is fired:
$('.user-status-ckbx').on('switchChange.bootstrapSwitch'...
The confirm() dialog pops up asking the user if he's sure he wants to de/activate the user. If the user clicks 'NO', the button is sent back to its original state using:
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
The problem I am having is that each time the toggleState() runs, the switchChange.bootstrapSwitch also runs again. This sents up a non-ending confirm() message which only goes away if the user confirms the message.
Is there an efficient way to prevent the switchChange.bootstrapSwitch method from running based on a real user click vs. a programmatically-generated toggle?
I've already tried:
e.originalEvent !== undefined
and
e.which
as suggested in other similar questions, but none of those work, nor do they even appear in the 'e' object...
<script>
$(".user-status-ckbx").bootstrapSwitch('size', 'mini');
$(".user-status-ckbx").bootstrapSwitch('onText', 'I');
$(".user-status-ckbx").bootstrapSwitch('offText', 'O');
//ajax to activate/deactivate user
$('.user-status-ckbx').on('switchChange.bootstrapSwitch', function(e){
var currentDiv = $("#" + e.currentTarget.id).bootstrapSwitch('state');
if( currentDiv == false){
var confirmed = confirm("Are you sure you wish to deactivate this user? They will no longer be able to access any forms.");
if(confirmed == true){
changeActivationStatus($(this).val());
} else {
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
}
} else {
var confirmed = confirm("Are you sure you wish to activate this user? Deactivated users which were previously active will have the same permissions prior to their de-activation unless changed manually.");
if(confirmed == true){
changeActivationStatus($(this).val());
} else {
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
}
}
});
function changeActivationStatus(userId){
$.post("{{ path('isactive') }}", {userId: userId})
.done(function(data){
console.log("Finished updating " + userId);
})
.fail(function(){
console.log("User could not be updated");
});
};
</script>
There's a way to prevent the event when switching programmatically.
You have to add options to the Bootstrap switches:
var options = {
onSwitchChange: function (event, state) {
// Return false to prevent the toggle from switching.
return false;
}
};
$(".user-status-ckbx").bootstrapSwitch(options);
And when programmatically switching the button, you'll have to add a second argument:
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState', true);
JSFiddle: https://jsfiddle.net/Ravvy/npz8j3pb/
$(".uid-toggle").change(function (event) {
var option = confirm('Are you sure, you want to change status?');
console.log(`$(this).prop('checked')`);
if (option) {
} else {
if ($(this).prop('checked')) {
$(this).prop('checked', !$(this).prop('checked'));
$(this).parent().removeClass('btn-primary off');
$(this).parent().addClass('btn-danger off');
} else {
$(this).prop('checked', !$(this).prop('checked'));
$(this).parent().addClass('btn-primary off');
$(this).parent().removeClass('btn-danger off');
}
}
});
I have process in my website which contains a few steps. To navigate I have "previous" and "next" buttons. These buttons are <a> elements with an href attribute (to visit the previous and next step).
The next button works as a door to the next step, but also to validate some fields in the current step, before it continues.
So this is what happens when clicking the next button:
The href value got saved in a variable $url.
preventDefault() prevents the link from opening the URL.
There are some validation checks done.
If they return "true", the $url will be loaded in window.location.
For some steps I need to do another check to the user with a confirm box. But here comes the problem:
Problem:
When the confirm() returns "false", the user should not go to the next page. But the window.location of function 1 "overrules" the preventDefault() of function 2 now.
1. Default next button function:
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if(wiz_validate_required() && wiz_is_step_done()) {
window.location = url;
}
});
2. Confirm box function:
$('.dimensions-check').click(function(e) {
if(confirm('Have you specified the dimensions in millimeters?') == false) {
e.preventDefault();
}
});
I would do something like that. If you have any question for the code please ask!
fiddle
// These can be changed for each step if you want or not a confirmation
var needs_confirm = true;
var cb_message = 'Have you specified the dimensions in millimeters?';
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if (needs_confirm === true) {
if (confirm_box(cb_message) === true) {
redirect_window(url);
}
} else {
redirect_window(url);
}
});
function confirm_box(cb_message) {
if (confirm(cb_message) === true) {
return true;
} else {
return false;
}
}
function redirect_window(url) {
if (wiz_validate_required() && wiz_is_step_done()) {
window.location = url;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="next_link">link
</div>
Where do you called the dimension-check?
e.preventDefault() only cancel the default action of a button which is submit the form. Regardless of e.preventDefault windows.location will always redirect you.
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if(wiz_validate_required() && wiz_is_step_done()) {
//If dimension isnot prompt{
//windows.location
//}else call dimension prompt
}
});
You can put the windows.location like this:
$('.dimensions-check').click(function(e) {
if(confirm('Have you specified the dimensions in millimeters?') == true) {
window.location = url;
}
});
the goal here is to detect if a user is checking out on my site and then prompt them with a special alert if they uncheck a box.
how do i combine to two functions to do this?
the detect function so far is this
var pathArray = window.location.pathname.split('/');
if (pathArray.length >= 3) {
if (pathArray[1].toLowerCase() == "commerce") {
var page = pathArray[2].toLowerCase();
if (page.indexOf("show-cart") == 0) {
console.log("Detected the cart page."); // This works
} else if (page.indexOf("checkout") == 0) {
console.log("Detected the checkout page."); // Does not work (no injection)
} else if (page.indexOf("order-confirmed") == 0) {
console.log("Detected the order confirmation page."); // Does not work (no injection)
}
}
}
and the checkbox alert function is this:
function validate() {
var checkoutHistory = document.getElementById('shipToBilling');
if (checkoutHistory.checked) {
} else {
alert("You have elected to turn off checkout history.");
}
}
window.addEventListener("load", validate, false);
Your onclick function can call both your functions
I have a site that needs to verify like a cookie. but i want to use local storage since it is a mobile concept.
I know the item is set through a test but i cant get the page to redirect when it is not true.
<script language="javascript">
if (localStorage.getItem('itemVerified') = 'True') {
window.location = "success.html";
}
else {
alert("You are not able to enter this site!");
window.location = "error.html";
}
</script>
There may be two errors, the first of which is that your comparison string missing an = sign:
incorrect: if (localStorage.getItem('itemVerified') = 'True') {
Correct: if (localStorage.getItem('itemVerified') == 'True') {
The second case is if you're looking to check the site from which to load the document you need to add the action to an event listener for them you can do the following.
<script type="text/javascript">
var verifyCookie = function(){
if (localStorage.getItem('itemVerified') == 'True') {
console.log("All right");
window.location = "success.html";
}
else {
alert("You are not able to enter this site!");
window.location = "error.html";
}
};
window.addEventListener ('DOMContentLoaded', verifyCookie, false);
</script>
Regards.
I am getting a JS Alert-box When I am leaving my tabs 1st time.
But would like to get it as windows alert - any idea on basis of my code.
Also that should have a OK and Cancel Button - Ok > Next Tab
Cancel> Same tab
$(document).ready(function () {
B.initB();
var 3firstTimeMsg = true;
var 4FirstTimeMsg = true;
$(".3a-tab").click(function(){
if(3firstTimeMsg == true)
{
alert("If you leave this page, any information you've entered will be lost.");
3firstTimeMsg = false;
}
});
$(".3b-tab").click(function(){
if(4FirstTimeMsg == true)
{
alert("If you leave this page, any information you've entered will be lost.");
4FirstTimeMsg = false;
}
});
});
That would probably be a confirm box:
if(3firstTimeMsg == true) {
3firstTimeMsg = confirm("If you leave this page, any information you've entered will be lost.");
}
FIDDLE