We Keep Coding

warning popup when user try to move on other page

I am trying to show the warning popup when user try to move on other page without saving the date.
i am using asp .net mvc 5 bootstroup menu.popup is coming but unable to stop loading other page while navigation to other page.
I need to navigate the user when they clicks Ok button if they click Cancel then they stays the same page.
$(".dropdown-menu").on("click", "li", function() {
var newMenu = $('a', this).attr('href');
var confirm = bootbox.confirm({
message: 'Rule is not saved, Do you want to save it?',
buttons: {
confirm: {
label: 'Continue without saving'
},
cancel: {
label: 'Save and Exit'
}
},
callback: function(result) {
if (result == true && is_dirty == false) {
window.location.href = newMenu;
} else {
window.stop();
}
}
});
});

You can achieve confirmation and achieve what you said using a flag which is set true when the data is saved. Enable the button or link only if flag is set true
$('#btnfb').click(function(){
var r = confirm("press ok to continue!");
if (r == false) {
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Visit W3Schools!

Prevent Javascript confirm() on Checkbox State Change

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');
}
}
});

preventDefault() overruled by window.location

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;
}
});

Javascript onClick Globally

I have a web application with many forms that submit data to a MySQL Database.
On all pages i have include 'settings.php'; so whatever i put in there will be on every page (CSS Links, JS Code etc)
Whats the best JS Code i can put in my settings.php file to put an "onClick" event on every single button on all pages.
I want it to do this:
onClick="this.disabled=true; this.value='Please Wait…';"
So on all forms within the site, every button that is clicked will display the Please Wait... text until the form is submitted

Clearly most of the people answering this question have never heard of event delegation.
window.addEventListener("click",function(e) {
var t = e.srcElement || e.target;
if( !t.tagName) t = t.parentNode;
if( t.tagName == "INPUT" && t.type.toLowerCase() == "submit") {
t.disabled = true;
t.value = "Please wait...";
}
},false);

You really shouldn't be using onClick=... Instead, bind the actions via JS:
document.getElementById('element-id').onclick=function(){
alert('Hello World');
}

Something like this ought to do it:
(function() {
var buttons = document.getElementsByTagName('button');
for (var i=0,len=buttons.length; i<len; i++) {
buttons[i].addEventListener('click', function() {
this.disabled = true;
this.innerHTML = "Please Wait...";
});
}
})();
http://jsfiddle.net/ryanbrill/5WYN9/

// very simple with jQuery
$(document).on('click', 'button,input[type="button"],input[type="submit"]', function (e) {
var $this = $(this).prop('disabled', true);
if ($this.is('button')) {
$this.html('Please wait...');
} else {
$this.val('Please wait...');
}
});

How to Listen for Upload Finished with jQuery in WordPress Thickbox Upload Window?

I'm injecting some jQuery to make the Alt Text field required in WordPress upload thick box.
It intercepts the Insert into Post button click and checks if the field has been filled or not.
It works ok for the Gallery and Media Library tabs, but the From Computer tab needs a needs a "listener" when an upload finishes to alter the behavior of the Insert into Post button.
I was trying with setInterval, but don't know how to kill or recreate it, but maybe someone is aware if a listener exists, or even how to make this code work because I suspect my logic here is fuzzy...
Here's the code, commented.
add_action('admin_head-media-upload-popup','so_11149675_required_alt_text');
function so_11149675_required_alt_text()
{
// Detect current tab ("From Computer" == "type")
$tab = isset($_GET['tab']) ? $_GET['tab'] : "type";
// ( 'From Computer' or ( 'Gallery' and 'Library' ) )
$jquery = ('type' == $tab) ? 'var refreshUpload = setInterval(function(){$(".savesend input").each(checkAltTextPermanent);},500);' : '$(".savesend input").each(checkAltTextOnce);';
echo <<<HTML
<script language="javascript" type="text/javascript">
// var refreshUpload; /* testing */
// Function called by From Computer tab
// should run only once -> when the upload table and fields are created
function checkAltTextPermanent() {
// Create the required asterisk symbol
// setInterval creates a loop here
jQuery('.image_alt th label').each(function(i,e) {
jQuery('<span class="alignright"><abbr title="required" class="required">*</abbr></span>').prependTo(this);
});
// Alter button behavior
// Another loop in the alert box
jQuery(this).click(function(e) {
// clearInterval(refreshUpload);
var value = jQuery(this).parent().parent().parent().find('.image_alt input').val();
if('' != value)
return true;
alert ('Please fill the Alt text');
return false;
});
}
// Function called by Gallery and Library tabs
function checkAltTextOnce() {
jQuery(this).click(function(e) {
var value = jQuery(this).parent().parent().parent().find('.image_alt input').val();
if('' != value)
return true;
alert ('Please fill the Alt text');
return false;
});
}
jQuery(document).ready(function($) {
// Defined in PHP, calls checkAltTextOnce or checkAltTextPermanent
{$jquery}
// Used in Gallery and Libray tabs
$('.image_alt th label').each(function(i,e) {
$('<span class="alignright"><abbr title="required" class="required">*</abbr></span>').prependTo(this);
});
});
</script>
HTML;
}

Try this:
jQuery(".savesend input").live("click", validateAltText);
function validateAltText() {
var value = $(".image_alt input").val();
if (value)
return true;
alert('Please fill the Alt text');
return false;
}