return true for click event and continue

Question

Hi I have a popup window control what I'm trying todo is get it to continue the click event if the user chooses the yes button. How do you continue the click event for the 'yes' button, I'm trying to make it return true but it doesn't continue for the click it just return false.

<script type="text/javascript"> 
    $(document).ready(function() {

        $('.delete-question').click(function(e) {                   
            ret = false;    
            _this = this;

            $('#pop-up-1').popUpWindow({
                modal: true,
                blurClass: '.main-container',
                action: "open",
                buttons: [{
                    text: "Yes",
                    click: function () {

                        this.close();
                        ret = true;
                    }
                }, {
                    text: "No",
                    click: function () {
                        this.close();                                   
                    }
                }]
            }); 

            return ret;
        })  
    });
</script>

Short answer is that you can't. The `return` will always be done before the user can click any of the popup's buttons. For more info, [Why is my variable unaltered after I modify it inside of a function?](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) and [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Jonathan Lonowski, Jul 08 '15 at 05:11
I've altered a plugin which I downloaded a while back, I'm really stack can someone help me out please as what todo — ONYX, Jul 08 '15 at 05:17

score 2 · Accepted Answer · answered Jul 08 '15 at 05:17

You can't do it directly, but you can emit the click event once it is needed, e.g. something like this (not tested):

<script type="text/javascript"> 
    // global flag to track the popup state
    var popupReturn = false;

    $(document).ready(function() {

        $('.delete-question').click(function(e) {
            // when true (after Yes click only) go on returning true
            if (popupReturn) {
                popupReturn = false;
                return true;
            }
            else {
              _this = this;

              $('#pop-up-1').popUpWindow({
                  modal: true,
                  blurClass: '.main-container',
                  action: "open",
                  buttons: [{
                      text: "Yes",
                      click: function () {
                          // set global flag to true
                          popupReturn = true;
                          // emit click event where it knows that popupReturn is true
                          $(_this).click();
                          this.close();
                      }
                  }, {
                      text: "No",
                      click: function () {
                          this.close();                                   
                      }
                  }]
                });
                return false;
            }
        })  
    });
</script>

When I click the .delete question button it just fires the click event without the modal popup showing — ONYX, Jul 08 '15 at 05:25
Yeah I tried you code it has no errors but the click event for .delete-question isn't getting fired — ONYX, Jul 08 '15 at 05:33

score 2 · Answer 2 · answered Jul 08 '15 at 05:31

You can't return from asynchronous event like in your case, because your "modal" is not really modal in sense that it doesn't pause code execution until use clicks a button.

This is where callback come handy. I would wrap the modal code into helper plugin and use it like this:

$.fn.confirmable = function(options) {

    options = $.extend({
        close: $.noop,
        dismiss: $.noop
    }, options);

    this.each(function() {
        $(this).popUpWindow({
            modal: true,
            blurClass: '.main-container',
            action: "open",
            buttons: [{
                text: "Yes",
                click: function() {
                    this.close();
                    options.close();
                }
            }, {
                text: "No",
                click: function() {
                    this.close();
                    options.dismiss();
                }
            }]
        });
    });
};


$('.delete-question').confirmable({
    close: function() {
        // ok pressed do something
    },
    dismiss: function() {
        // cancel pressed
    }
});

It means that your workflow needs to transform to asynchronous callback/promise-based.

return true for click event and continue

2 Answers2