Confirm delete via AJAX How can I have a JS confirmation button pop-up when a user clicks a button and then fire the #ajax defined for that button?

Right now, I have this button at the end of my form:

    //add an update button to the end of every row
    $form[$row_name][sizeof($data['columns']) + 1] = array (
        '#type' =&gt; 'button',
        '#value' =&gt; t('Delete Row'),
        '#name' =&gt; $row . '-_udr_delete_data',
        '#prefix' =&gt; "&lt;td class='delete-button'&gt;",
        '#suffix' =&gt; "&lt;/td&gt;",
        '#ajax' =&gt; array (
            'callback' =&gt; '_udr_ajax_handler',
            'progress' =&gt; FALSE,
         ),
        '#weight' =&gt; 1001,
    );
  }
  $form['table_end'] = array(
      '#prefix' =&gt; '&lt;/table&gt;',
  );

  //if the form has been changed, update the appropriate fields
  if ( isset($form_state['triggering_element']) ) {
    $callback = _name_to_callback($form_state['input']['_triggering_element_name']);
    if ($callback == "_udr_update_data") {
      _udr_update_data($form, $form_state, $data);
    } 
    elseif ($callback == "_udr_delete_data") {
      _udr_delete_data($form, $form_state, $data);
    }
  }
  return $form;
}


I would like to make this button make a pop-up warning that asks the user if he/she would like to really delete the data.  If yes, then delete.  If no, then don't delete.

I have tried various methods such as:

'#attributes' =&gt; array('onclick' =&gt; 'if(!confirm("Really Delete?")){return false;}'),


And also:

    // Add an delete button to the end of every row
    $form[$row_name][sizeof($data['columns']) + 1] = array (
      '#type' =&gt; 'submit',
      '#submit' =&gt; array('udr_submit_rebuild'),
      '#value' =&gt; t('Delete Row'),
      '#name' =&gt; $row . '-_udr_delete_data',
      '#prefix' =&gt; "&lt;td class='delete-button'&gt;",
      '#suffix' =&gt; "&lt;/td&gt;",
      '#ajax' =&gt; array (
        'wrapper' =&gt; "row-$row",
        'callback' =&gt; '_udr_ajax_handler',
        'progress' =&gt; FALSE,
      ),
      '#weight' =&gt; 1001,
    );
  }

  if (isset($form_state['triggering_element']) &amp;&amp; $form_state['triggering_element']['#value'] == t('Delete Row')) {
    $form[$row_name][sizeof($data['columns']) + 1]['#value'] = t('Really Delete?');
    $form[$row_name][sizeof($data['columns']) + 1]['#submit'] = array('udr_submit_handler');
  }

  $form['table_end'] = array(
    '#prefix' =&gt; '&lt;/table&gt;',
  );

  //if the form has been changed, update the appropriate fields
  if ( isset($form_state['triggering_element']) ) {
    $callback = _name_to_callback($form_state['input']['_triggering_element_name']);
    if ($callback == "_udr_update_data") {
      _udr_update_data($form, $form_state, $data);
    } 
    //~ elseif ($callback == "_udr_delete_data") {
      //~ _udr_delete_data($form, $form_state, $data);
    //~ }
  }
  return $form;
}

function udr_submit_rebuild($form, &amp;$form_state, $data) {
    $form_state['rebuild'] = TRUE;
}

function udr_submit_handler($form, &amp;$form_state, $data) {
  $callback = _name_to_callback($form_state['input']['_triggering_element_name']);
  if ($callback == "_udr_delete_data") {
    _udr_delete_data($form, $form_state, $data);
    $form_state['rebuild'] = TRUE;
  }
}
The correct way to fix this issue is to is to attach a JavaScript watch to the button and have the trigger make a confirm dialog pop up and then make a JavaScript request from the user's browser back to a URL with a parameter of the element to be deleted at the end of it, then fade out the rows from the HTML table and make sure the zebra striping is correct, then secure that second URL to have the same permissions as the original page, then receive the parameter at the called URL and process the callback you had originally intended to run:

PHP:

onclick="Drupal.dccAdmissions_confirm_delete('$rec-&gt;pi_firstname $rec-&gt;pi_lastname', '$rec-&gt;pi_id . ', '$rec-&gt;pi_id', jQuery(this) );


JavaScript:

( function($) {
  Drupal.dccAdmissions_confirm_delete = function( in_name, id, object ) {
    if ( confirm( 'Do you want to delete the application for ' + in_name + '?' ) ) {
      $.ajax({
        type: 'GET',
        url: '/admissions/application/delete/' + id,
        success: function(data) { 
          if ( data == 'DELETED' ) {
            // Remove the specific row
            $(object).parents('tr').fadeOut( 1000 );
            $(object).parents('tr').remove();
            $('#dccadmissions-application-management-form tr:nth-child(odd)').addClass( 'odd' );
            $('#dccadmissions-application-management-form tr:nth-child(odd)').removeClass( 'even' );
            $('#dccadmissions-application-management-form tr:nth-child(even)').addClass( 'even' );
            $('#dccadmissions-application-management-form tr:nth-child(even)').removeClass( 'odd' );
          } else {
            alert( 'Delete failure: ' + data );
          }
        } 
      }); 
    }
  }
  Drupal.dccAdmissions_confirm_reset = function( in_name ) {
    return confirm( 'Do you want to reset the application for ' + in_name + '?' );
  }
})(jQuery);


Make a menu hook:

function dccAdmissions_menu() {
  $items['admissions/application_management'] = array (
    'title' =&gt; t("Admissions Online Application Management"),
    'page callback' =&gt; 'dccAdmissions_application_management_content',
    'type' =&gt; MENU_CALLBACK,
    'access callback' =&gt; 'dccInGroup',
    'access arguments' =&gt; array( 'Admissions' ),
  );


Check your cases:

/*
 * Page callback for application management pages.
 */
function dccAdmissions_application_management_content( $arg1 = 'new', $arg2 = 0, $arg3 = '' ) {
  include_once "application-management.data.inc";

  $module_path = drupal_get_path( 'module', 'dccAdmissions' );
  $output = array(
    '#attached' =&gt; array(
      'css' =&gt; array( $module_path . '/css/application-management.css', ),
      'js'  =&gt; array( $module_path . '/js/application-management.js', ),
    ),
  );

  switch( $arg1 ) {
    case 'delete':
      $message = _dccAdmissions_application_management_delete( $arg2 );
      return drupal_json_output( $message );
      break;


Then delete your data:

function _dccAdmissions_application_management_delete( $id ) {
//... your delete code here...