What is the best way to add a confirmation tooltip to the remove button of a managed_file field?

Question

Another Update

I'm trying to implement the solution found here: Intercept click event on a button, ask for confirmation, then proceed, but the remove button still submits normally. I know my JS is targeting the correct element, because I can change other attributes on it like the background color.

Here's my form:

function form_experiments_01() {
  $form['#attached']['js'] = array(
    drupal_get_path('module', 'form_experiments') . '/js/form_experiments.js',
  );

  $form['managed_files'] = array(
    '#type' => 'fieldset',
    '#title' => t('Managed Files'),
  );

  $num_docs = 3;
  for ($i = 1; $i <= $num_docs; $i++) {
    $form['managed_files'][$i] = array(
      '#type' => 'managed_file',
      '#title' => 'Managed File ' . $i,
    );
  }

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
  );

  return $form;
}

Here's my javascript:

(function ($) {
  Drupal.behaviors.managedFileAutoUpload = {
    attach: function(context, settings) {
      $('.form-item input.form-submit[value=Upload]', context).hide();
      $('.form-item input.form-file', context).change(function() {
        $parent = $(this).closest('.form-item');

        //setTimeout to allow for validation
        //would prefer an event, but there isn't one
        setTimeout(function() {
          if(!$('.error', $parent).length) {
            $('input.form-submit[value=Upload]', $parent).mousedown();
          }
        }, 100);
      });
    }
  };

  Drupal.behaviors.managedFileConfirmRemove = {
    attach: function(context, settings) {
      var myButton = $('.form-item input.form-submit[value=Remove]', context);

      if (myButton.length > 0) {
        var myClick = null;

        //get a list of jQuery handlers bound to the click event
        var jQueryHandlers = myButton.data('events').click;

        console.log(jQueryHandlers);

        //grab the first jquery function bound to this event
        $.each(jQueryHandlers,function(i,f) {
          myClick = f.handler;
          return false;
        });

        //unbind the original
        myButton.unbind('click');

        //bind the modified one
        myButton.click(function(){
          if(window.confirm("Are You Sure?")){
            myClick();
          } else {
            return false;
          }
        });
      }
    }
  }
})(jQuery);

Update

After some more research I found this question. This is what I was trying to ask but didn't know how to word.

Intercept click event on a button, ask for confirmation, then proceed

I'll implement this solution and post a resolution once I've got it working.

Description

I would like to add a confirmation tooltip when the "remove" button is clicked on my managed_file field.

I would like to do something similar to this:

What is the best way to do that?

Possible Solution?

So far, I'm thinking I could probably use javascript to hide the remove button and instead display my own button. Then when my button is clicked, I can trigger a popup that contains a second custom button to cancel and the remove button that I originally hid.

I'm worried that this solution is a bit messy. Is there a more elegant way to do this? Can I get a similar behavior without hiding the original remove button?

Similar Questions

I'm not sure if these apply to my use-case since I'm working with a managed_file field. So far, I've been unable to implement similar solutions without the default behavior of the remove button interfering.

• Confirm delete via AJAX
• enter link description here

Resources

• Bootstrap-Confirmation.js
• Drupal Form API Reference - managed_file

Answer 1

Use this code to delay submit and display popup before submitting.

$("form").submit( function () {
   //display tooltip something
   return true;
 }

Something like this:

$('.form-item input.form-submit[value=Remove]').submit {
  if (window.confirm("Are You Sure?")) {
    myClick();
  } else {
    return false;
  }
}