1

I basically want to do what confirm_form does, but in a custom modal (I am gonna use a JS plugin to generate the confirm modal).

So what I have is a large hook_form_alter, and I am using the following code for the submit button. I am using workflow, so only certain submit buttons will have this behavior attached.

I have succeeded in attaching the behavior, and the popup shows every time you click the button. Unfortunately the node edit form still submits. Where I return the value in openDialog(), it should not save if value if false (if the user clicks NO). If the user clicks YES, save the node.

// 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";
                        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();
                                }
                                //console.log(options);
                                return value;
                            }
                        });
                    }
                    // override the default confirmation dialog behavior
                    Drupal.behaviors.myModule = {
                        attach: function(context, settings) { 
                            Drupal.ajax["edit-actions-workflow-5"].options.beforeSerialize = function(form_values, element, options) {
                                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';
}

EDIT I took your suggestions and updated the JS to what is below. The return value is now what I expected, but the form still submits on clicking NO (returning false). I looked at jQuery Form and was under the impression that returning false would stop a submit...

(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) {
                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(element, options) {
                    openDialog();
                }
            }
        }
})(jQuery);
4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.