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.