Alertify is executing before confirmation?

Question

I decided to modify and style i little bit my code with Alertify. My old code :

<script type="text/javascript">
$('.ask').click(function(){
    var answer = confirm('<?php echo $this->translate('Delete route?'); ?>');   
    return answer;
});

When I press ok a php script runs and deletes the record. Javascript return true or false.

The problem I have with Alertify is that I even cant press ok or cancel, my php script runs before that. Here is the code:

$(".ask").click(function(event){
alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        return true; 
    } else {
        return false;
    }
});

});

I saw some people with similar problems and I saw that I need to use prevent defaults (it makes sense) The code:

$(".ask").click(function(event){
event.preventDefault(); // cancel submit
alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        return true; // submit form skipping jQuery bound handler
    } else {

    }
});

});

In that case the php script doesnt run before i press ok/cancel but it doesnt run too when i press one of the buttons. Nothing happens. Any help please ?

James Thorpe · Accepted Answer · 2014-09-18T09:58:55.110

6

You're running into the asynchronous nature of JavaScript. In the original code, execution of all JavaScript is paused while the confirm dialog is open, so you can directly use the return value from it. However, when you use alertify.confirm, it doesn't pause execution of the script, so the click handler returns immediately and any code around it will also run - ie the code to invoke your php script. When you attempt to return true; from inside the alertify.confirm callback function, you're returning from that inner function to the alertify code, not returning from your outer click handler function.

What you need to do is start to work with the callback methods available, rather than against it - I would suggest restructuring your code as follows. Following confirmation that .ask is an a tag, the following should work:

$(".ask").click(function(event){
  var loc = $(this).attr('href');
  alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
    if (e) {
        document.location.href = loc;
    }
  });
  //prevent link from being followed immediately on click
  return false;
});

edited Sep 18 '14 at 09:58

answered Sep 18 '14 at 09:40

James Thorpe

31,411
5
72
93

+1 but as other way - instead of callback function - you can use `$.Deferred()`. – Regent Sep 18 '14 at 09:47
will not work check here form will submit not wait for ok or cancel http://jsfiddle.net/6zNaP/36/ – Umesh Sehta Sep 18 '14 at 09:49
Assuming that `.ask` is a form submit button, which hasn't actually been specified anywhere, simply turn it into a normal, non-submitting button. No need to prevent the default action either then, which could in turn lead to other unwanted issues elsewhere as more complexity is introduced into the page. – James Thorpe Sep 18 '14 at 09:51
1

@user3819192 just add `return false` at the end of click handler: [updated fiddle](http://jsfiddle.net/6zNaP/38/). – Regent Sep 18 '14 at 09:55
Thanks for the response. Now things are more clear but i am not sure what i must do. Btw i thing that i forgot to say that .ask is which leads to zend controller, there the delete is made. – Lubomir Borisov Sep 18 '14 at 09:55
@LubomirBorisov so you do not want to prevent default behaviour when user clicked "Ok" in alertify? – Regent Sep 18 '14 at 09:57

Alertify is executing before confirmation?

1 Answers1