How to add a JS confirmation popup when clicking an #ajax button I have a basic FAPI button input that is #ajax enabled and that's working fine, but I want to add a JS "Are you sure?" confirmation popup when clicking the button before the code actually runs, and I'm not sure how to do that because FAPI's JS seems to be eating the click before I can get to it no matter what I do.

I've tried adding an inline onclick handler, like so:

$form['search_filters']['channels']['channel_delete_' . $channel-&gt;nid] = array(
  '#type' =&gt; 'button',
  '#name' =&gt; 'channel_delete_' . $channel-&gt;nid,
  '#value' =&gt; 'Delete',
  '#attributes' =&gt; array(
    'class' =&gt; array('confirm'),
    'onclick' =&gt; "return confirm('Are you sure you want to delete that?')"
  ),
  '#button_type' =&gt; 'no-submit',
  '#ajax' =&gt; array(
    'callback' =&gt; 'delete_channel_callback',
    'wrapper' =&gt; 'channel_container_' . $channel-&gt;nid
  ),
);


...which doesn't help, and I've also tried adding:

$('.confirm').click(function(e) {
  e.preventDefault();
  alert('Is this recognized')? // never runs
});


in my module's JS which is also ignored.

Any other ideas? Is there a way to add a submit handler to the top of the stack which Drupal #ajax will recognize?
Drupal is a PHP framework, and it's amazing how much fancy AJAX stuff you can get using that and the FAPI. But it has it limits and for a use case like this, I would suggest that you use custom JavaScript. Also instead of using the usually JavaScript dialog, you could use jQuery UI to create a themable dialog instead.

Anyways the problem that you're facing is probably caused because you use AJAX on the submit button. Since you are using AJAX for the actual delete call, preventDefault and the like won't work.

What you would have to do is something like this. (This is not widely tested but should work.)

Drupal.behaviors.module = {
  attach: function() {

    var events = $('.confirm').data('events'); // Get the jQuery events.
    $('.confirm').unbind('click'); // Remove the click events.
    $('.confirm').click(function () {
      if (confirm('Are you sure you want to delete that?')) {
        $.each(events.click, function() {
          this.handler(); // Invoke the click handlers that was removed.
        });
      }
      // Prevent default action.
      return false;
    });
  }
}