3

I'd like to have a simple feedback form that is submitted via AJAX, using Drupal 7. Upon receipt of the form, I want a simple jQuery modal dialog to appear that will say something along the lines of "Thank you for your submission, etc.". The browser standard alert does accomplish this, but my client feels that this looks unprofessional, hence the desire for the more nicely styled jQuery dialog.

Using ajax_command_alert() causes the browser to use a simple alert() function. Is there any way to force usage of the jQuery modal dialog? For reference, my code is below:

function feedback_form($form, &$form_state) {

    $form['first_name'] = array(
        '#type' => 'textfield',
        '#title' => 'First Name',
    );

    $form['last_name'] = array(
        '#type' => 'textfield',
        '#title' => 'Last Name'
    );

    $form['email'] = array(
        '#type' => 'textfield',
        '#title' => 'Email'
    );

    $form['comments'] = array(
        '#type' => 'textarea',
        '#title' => 'Comments'
    );

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

    return $form;
}

function feedback_form_submit($form, &$form_state) {
    $commands = array();
    $commands[] = ajax_command_alert("Form received");
    return array('#type' => 'ajax', '#commands' => $commands);
}

EDIT: I see that the alert function is defined in misc/ajax.js, under Drupal.ajax.prototype.commands. If I were to alter the JS file's implementation of alert, this would work - but that would be considered hacking core, I believe. How else could I alter this function?

2

I solved this problem in two ways - first, I added my own JS file which adds a modal option to Drupal's AJAX commands with the following JS code:

jQuery(function() {

    // Add modal dialog option to Drupal AJAX
    Drupal.ajax.prototype.commands.modal = function(ajax, response, status) {
        // Code to create a modal dialog goes here
    }   

});

Then, in my AJAX callback on the server, I used the following code:

function feedback_form_submit($form, &$form_state) {
    return array(
        '#type' => 'ajax', 
        '#commands' => array(
            array(
                'command' => 'modal',
                'text' => "Form submission successful!"
            )
        )
    );
}
  • Good one. I hope it works. – Sivaji Jan 25 '12 at 11:59
  • It does...I am using it in a production website right now. ;) – rybosome Jan 25 '12 at 12:58
  • Good to know. But the AJAX API documentation is still rudimentary. Anyway it is not related to this question. – Sivaji Jan 26 '12 at 13:13
0
function feedback_form($form, &$form_state) {
  ...
  $form['#attached']['library'][] = array('system', 'ui.dialog');
  ...
}

function feedback_form_submit($form, &$form_state) {
  $commands[] = ajax_command_append('body', '<div id="dialog" class="element-hidden">Form received</div>');
  $commands[] = ajax_command_invoke('#dialog', 'dialog');
  return array('#type' => 'ajax', '#commands' => $commands);
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.