Prevent Javascript confirm() on Checkbox State Change

Question

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>

score 2 · Answer 1 · answered Nov 19 '15 at 23:37

2

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/

answered Nov 19 '15 at 23:37

Ravvy

199
1
7

From the Bootstrap Switch Doc: "The method toggleState can receive an optional second parameter skip. if true, switchChange event is not executed. The default is false." Turns out you don't even need the onSwitchChange option set to false. Doing that creates the opposite effect of not toggling the state when the user hits "confirm". I will edit your answer accordingly. Thanks – Ravioli87 Nov 20 '15 at 03:45

Vivek Keecheril · Answer 2 · 2020-03-26T06:12:54.207

$(".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');
        }
    }
});

Please include a description of why this solves the problem instead of just including code. — Spencer, Mar 20 '20 at 16:51

Prevent Javascript confirm() on Checkbox State Change

2 Answers2