Passing the result of click event to invoking function

Question

Let's say I have a function that is creating a 'confirm or cancel' dialog dynamically and binding click events to the OK and Cancel links.

function confirmOrCancelDialog() {
    //already created $dialog to popup on screen

    $dialog.find('a.confirm').click(function() {
        //close dialog
        return true;
    });

    $dialog.find('a.cancel').click(function() {
        //close dialog
        return false;
    });

}

Then, I am invoking the creation of this dialog from another function. I want to pass the result of the interaction to the invoking function.

function performAction() {
    var clickResult = confirmOrCancelDialog();

    if (clickResult === true) {
        //do some stuff
    }
}

Any guidance on how to do this would be appreciated. Thanks.

Well then, some way to structure it so that it is synchronous. — earthman
– earthman, Commented Oct 9, 2013 at 22:32
Just use a callback, or call out of the click function. The click could occur a very long time in the future and it would make no sense to block while waiting (which doesn't happen, the function will just complete). — Travis J
– Travis J, Commented Oct 9, 2013 at 22:42

dbanet · Accepted Answer · 2013-10-09 22:35:22Z

3

function confirmOrCancelDialog(someStuff) {
    //already created $dialog to popup on screen

    $dialog.find('a.confirm').click(function() {
        //close dialog
        someStuff(true);
        return true;
    });

    $dialog.find('a.cancel').click(function() {
        //close dialog
        someStuff(false);
        return false;
    });

}
function performAction() {
    confirmOrCancelDialog(function(clickResult){
        if (clickResult === true) {
            //do some stuff
        }
    });
}

answered Oct 9, 2013 at 22:35

dbanet

6955 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

earthman Over a year ago

This pattern is PERFECT. Thank you!

Patrick Coffey · Accepted Answer · 2013-10-09 22:38:18Z

0

You could just add an on click event to all anchors within the dialog object, and then check to see if the clicked anchor has the confirm class (or cancel, either one) and return accordingly:

$('.dialog a').on('click', function(event) {
  if ($(this).hasClass('confirm')) { return true; }

  return false;
});

answered Oct 9, 2013 at 22:38

Patrick Coffey

1,0838 silver badges13 bronze badges

1 Comment

earthman Over a year ago

Would have done it in a similar fashion if I had any control over it... Thanks for your input sir!

Plato · Accepted Answer · 2013-10-09 22:43:31Z

0

Try this:

function confirmOrCancelDialog(callback) {
  //already created $dialog to popup on screen
  $dialog.find('a.confirm').click(function() {
    //close dialog
    callback(true);
  });

  $dialog.find('a.cancel').click(function() {
    //close dialog
    callback(false);
  });
}

function performAction() {
  confirmOrCancelDialog(function(clickResult){
    if (clickResult === true) {
      //do some stuff
    }
  });
}

answered Oct 9, 2013 at 22:43

Plato

11.1k2 gold badges46 silver badges63 bronze badges

3 Comments

Plato Over a year ago

I don't remember offhand if callback will still be in scope when it is called from within the click handlers. If you get a callback is undefined error, post a comment (even better, a jsfiddle) and I'll modify this to use a closure to save the callback reference.

Plato Over a year ago

Ha sorry @user1990577 I promise I didn't intentionally copy your answer <3

dbanet Over a year ago

(why can't I post short comments...) @Plato ;)

Collectives™ on Stack Overflow

Passing the result of click event to invoking function

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related