1

I want to create a custom confirmation box on my site.

  1. Can an event handler be bound inside of an anonymous function.
  2. Will javascript wait on a return value or return null/false after a timetout/pause in execution.
  3. Is a confirmation box possible with deferred objects? I'm having a really hard time putting together how deferred objects work and how to implement them. Would the following work in theory?

HTML

<div id='box'>
   <button id='confirm'></button>
</div>
<button id='startConfirmation'></div>

javascript (jquery)

$('#startConfirmation').click(function()
{
   if(buttonClicked())
   {
      //do stuff
   }
});
function buttonClicked()
{
   return $('#confirm').click(function()
          {
             return true;
          });
}
Craig Lafferty
  • 771
  • 3
  • 10
  • 31
  • 8
    That's not possible, I'm afraid. Well, there are horrible, hacky ways of doing it but I'd recommend you bite the bullet and look into using callback functions. Once you get your head round the asynchronous way of doing things you'll never look back. – Reinstate Monica Cellio Jan 22 '14 at 17:50
  • 2
    No that is not how event handlers work. If you want to wait I suggest you use a [`confirm`](http://www.w3schools.com/jsref/met_win_confirm.asp) – Danny Jan 22 '14 at 17:50
  • It is possible for an event handler to return though, right? That may or may not be useful but every bit of information will help me on the journey that is learning javascript. – Craig Lafferty Jan 22 '14 at 17:54
  • 3
    The [return value in jQuery event handlers](http://stackoverflow.com/questions/4379403/jquery-event-handlers-return-values) is use for stopping the propagation of the event. In your example the return value of the `buttonClicked` function is just the jQuery object, it would be the same as `return $('#confirm');`, except in your case you are attaching an event handler also to the object. – Danny Jan 22 '14 at 17:57
  • So what if I set the class of the button to "true" or something similar and instead of returning the object I return its class and use that information to continue the loop? – Craig Lafferty Jan 22 '14 at 18:02
  • If you want to run code when the button was clicked, you would put that *inside* the event handler. – Felix Kling Jan 22 '14 at 18:03
  • 1
    No, that doesn't work because the code doesn't wait until the button was clicked. – Felix Kling Jan 22 '14 at 18:04
  • I could put the code that I want to run inside of the event handler but I want a modular solution so that I can use it for multiple confirmations. – Craig Lafferty Jan 22 '14 at 18:06
  • 1
    In psuedo code, what you actually want is... `$('#startConfirmation').click(function() { showConfirmationDialog(); });` and `$('#confirm').click(function() { // do stuff here });` – Reinstate Monica Cellio Jan 22 '14 at 18:07
  • You achieve modularity by encapsulating your code in functions. You can call that function from inside the event handler or from anywhere else. Sometimes it might be more tricky to achieve modularity, but your approach is impossible and you should look for another one. – Felix Kling Jan 22 '14 at 18:09
  • It must be a value returning function though so I can decide what to do based on the response. I considered polling `while(1){}` and check if flags were set which would change based on button clicks but this seems a resource intense way of doing things and I don't want to consume the thread. – Craig Lafferty Jan 22 '14 at 18:13
  • 1
    while(1) wouldn't work either because JavaScript is single threaded and this would block the thread. The event handler who would supposedly set flag would never run. You really have to get your head around asynchronous programming/callbacks. – Felix Kling Jan 22 '14 at 18:18
  • @Archer, I could do that but I would have to put every instance of the code that I want to run in the click handler and although it is a solution I want to do be able to call the confirmation in any function. E.X. if(confirmation("cancel class?")){...}, if(confirmation("do something eles?")){...}, etc. – Craig Lafferty Jan 22 '14 at 18:18
  • 1
    Then you would restructure your code so that `confirmation` accepts a callback, e.g. `confirmation("cancel class?", function(result) { if (result) {...} else {...}});`. Or instead of passing callbacks, you can make `confirmation` return a promise, so that it is more modular: `confirmation('cancel class').then(function() { /*yes*/}, function() { /*no*/ });`. Again: you have to find a different approach. – Felix Kling Jan 22 '14 at 18:23
  • 1
    Also regarding learning more about promises, check http://learn.jquery.com/code-organization/deferreds/. – Felix Kling Jan 22 '14 at 18:31

1 Answers1

1

Can an event handler be bound inside of an anonymous function.

Yes.

Will javascript wait on a return value or return null/false after a timetout/pause in execution.

No.

Is a confirmation box possible with deferred objects?

Yes.

I'm having a really hard time putting together how deferred objects work and how to implement them.

They're still asynchronous, which means you cannot simply call a function and return the value from it. They just allow easier chaining of multiple asynchronous tasks.

Would the following work in theory?

Nope, as I just said - buttonClicked() can hardly return a useful value. It might have some kind of internal storage and return a boolean value whether the button has been clicked at least once, but I think that's not what you want.

With deferreds, it would more likely look like this:

function buttonClicked() {
    var deferred = $.Deferred();
    $('#confirm').one("click", deferred.fulfill);
    // maybe reject at [ESC] or when hitting a close button?
    return deferred.promise;
}

$('#startConfirmation').click(function() {
    // every time the start button is hit
    buttonClicked().then(function() {
        // do stuff (maybe return another promise)
    }).always(closeDialogue);
});
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Is that supposed to be "on" instead of one? – Craig Lafferty Jan 23 '14 at 00:00
  • 1
    @Craig: No, it's specifically supposed to be a [`one`](http://api.jquery.com/one/) - the promise is not fulfilled multiple times. Actually I'd like to name this method `.once()` :-) – Bergi Jan 23 '14 at 00:01