Is it possible to use AJAX and the workflow transition buttons to affect a node edit form's submission?

I want to have a (non-system) popup that comes up when certain state change transition buttons are clicked, asking the user to confirm their changes. Basically confirm_form functionality, in a popup/modal form. I don't know if you can somehow shoehorn confirm_form into a popup.

I read that since forms in Drupal use Malsup's Form plugin, you can hook into the beforeSerialize/Send/Submit functions and return false to stop the form submitting. Since Workflow Extensions' state change buttons are effectively submit buttons, I thought I could add some AJAX behaviors to those buttons via hook_form_alter, write some JS, and boom - if the user clicks "no" on the confirm, then the form doesn't submit. That isn't the case. The form submits while the popup is open, and so it doesn't get any feedback from the confirm function.

Is this possible to do via the state transition buttons? Or is it achievable using Rules or something similar?

// Here I am adding the wrapper and adding the ajax attributes. Part of the `hook_form_alter`

$form['actions']['submit']['#prefix'] = '<span id="wf-wrapper">';
$form['actions']['submit']['#suffix'] = '</span>';
$form['actions']['submit']['#attributes']['class'] = array('workflow-submit', 'use-ajax-submit');

$form['actions']['submit']['#ajax'] = array(
    'event' => 'mousedown', 
    'callback' => 'confirm_save',
    'wrapper' => 'wf-wrapper',
    'prevent' => 'click',
    'method' => 'after'
);

// Here is the JS that doesn't work right now. The popup displays as it should but the form still submits.

$form['workflow_button_js'] = array(
    '#markup' => '<div id="buttonjs"><script type="text/javascript">
                 (function ($) {
			function openDialog() {
				vex.dialog.buttons.YES.text = "YES";
				vex.dialog.buttons.NO.text = "NO";
				return vex.dialog.confirm({
					message: "Have you verified that the information you are about to submit is accurate to the best of your knowledge?",
					callback: function(value) {
						if(value === true){
						    Drupal.ajax.prototype.beforeSerialize();
						}
						return console.log(value);
					}
				});						
                         }
			// override the default confirmation dialog behavior
			Drupal.behaviors.myModule = {
				attach: function(context, settings) { 
					Drupal.ajax["edit-actions-workflow-5"].options.beforeSerialize = function(context, options) {
						return openDialog();
					}
								
				}
			}
	})(jQuery);
    </script></div>',
);

// This is just a callback because I have to have one, don't really know what or if I should return anything 
function confirm_save(&$form, &$form_state) {
    return 'submit';
}

Comments

lkitnet created an issue. See original summary.

lkitnet’s picture

Issue summary: View changes