Add jQuery Confirm before Logout

Question

I'm new to jQuery and I'm using the confirm box from here . But I'm facing a problem where my current page redirects back to Login page before even confirming my logout in the dialog box.

Below is my script:

$('a#logout').on('click', function () {

                        var isConfirmed = $.confirm({
                            title: 'Logout Confirmation',
                            content: 'Are you sure you want to logout?',
                            buttons: {
                                confirm: function () {
                                    // $.alert('Confirmed!');
                                   return true;
                                },
                                cancel: function () {
                                    // $.alert('Canceled!');
                                    return false;
                                },
                            }
                        });

                        if(isConfirmed == true){
                            window.location.href="extra-login.html";
                        }

                    });

And this is my HTML

<a href="extra-login.html" id="logout"> Log Out <i class="entypo-logout right"></i> </a>

Any help would be appreciated. Thanks in advance!

Answer 1

The problem is your anchor elements default action is to take the user to login page which is not prevented.

You can call the event.preventDefault() to do this.

Also the confirm plugin looks like a non blocking plugin, so you need to move the redirect code to the success handler.

$('a#logout').on('click', function(e) {
  e.preventDefault();

  var isConfirmed = $.confirm({
    title: 'Logout Confirmation',
    content: 'Are you sure you want to logout?',
    buttons: {
      confirm: function() {
        window.location.href = "extra-login.html";
      },
      cancel: function() {},
    }
  });
});

Answer 2

I'm guessing the dialogue isn't blocking (I don't know of any that are in JS). You should just put your success code in the callback for the confirm button, like so:

$('a#logout').on('click', function () {

                        $.confirm({
                            title: 'Logout Confirmation',
                            content: 'Are you sure you want to logout?',
                            buttons: {
                                confirm: function () {
                                    // $.alert('Confirmed!');
                                    //I'm guessing this function is called when the button is clicked.
                                    window.location.href="extra-login.html";
                                   return true;
                                },
                                cancel: function () {
                                    // $.alert('Canceled!');
                                    return false;
                                },
                            }
                        });

                    });

But the main reason your code is redirecting immediately is the href tag in your link. You basically have a link to another page, that also tries to run some JS, but because it's a link it redirects before the JS can even run. Do this instead:

<a href="#" id="logout">
    Log Out <i class="entypo-logout right"></i>
</a>

Answer 3

i am new,too i hope my suggestion is right but why don't you put href in confirm function.

$('a#logout').on('click', function (event) {
     var isConfirmed = $.confirm({
                        title: 'Logout Confirmation',
                        content: 'Are you sure you want to logout?',
                        buttons: {
                            confirm: function () {
                               window.location.href="extra-login.html";
                            },
                            cancel: function () {
                              event.preventDefault();
                            },
                        }
                    });

 });

Answer 4

Why don't you use like this -

$('a#logout').on('click', function(){
    if($(this).confirm({title: 'Logout Confirmation', content: 'Are you sure you want to logout?'})){
    window.location.href="extra-login.html";
}else{
    return false;
}
});