Using Drupal AJAX with Drupal Messages - php

Question

I have a custom module right now in order to text AJAX functionality with Drupal Messages. The module has the following code (test_error.module):
<?php
function test_error_user_view_alter(&$build) {
//_assassinations_player_profile($build);
}
function test_error_form_alter(&$form, &$form_state, $form_id) {
$form['test_error'] = array(
'#type' => 'button',
'#name' => 'Error',
'#value' => t('Error'),
'#ajax' => array(
'callback' => 'test_error_error',
'wrapper' => 'the-wrapper-div-field',
),
);
$form['test_warning'] = array(
'#type' => 'button',
'#name' => 'Error',
'#value' => t('Error'),
'#ajax' => array(
'callback' => 'test_error_warning',
'wrapper' => 'the-wrapper-div-field',
),
);
return $form;
}
function test_error_error() {
drupal_set_message("Header error", 'error');
}
function test_error_warning() {
drupal_set_message("Header warning", 'warning');
}
Then, in page.tpl.php, I have the following to output $messages:
<div id="messages-wrap"><?php print $messages; ?></div>
The AJAX function happens when the button is clicked - setting the message - while the message only displays after the page reloads. I tried to hack my way through the return AJAX call like so:
jQuery(document).ready( function(){
jQuery('.ajax-processed').each( function(){
jQuery(this).unbind();
});
jQuery('#edit-test-warning, #edit-test-error').click( function() {
var the_form = jQuery(this).closest('form');
var form_action = the_form.attr('action');
var details = the_form.serialize();
jQuery.ajax({
type: "POST",
url: form_action,
data: details
}).done( function(){
jQuery('#messages-wrap').load("/ #messages-wrap");
});
});
});
The binding of a click event on the #edit-test-x buttons never occurs because of Drupal's native ajax.js preventing it by adding its ajax-x classes.
It's driving me crazy that this problem is so persistent and so difficult to solve when the goal is such a simple thing. What am I missing? Google searching and StackOverflow browsing has come up surprisingly fruitless.
Thanks!

Answer 1

At first, here is some explanations:
1. So you trying to render drupal messages as part of the form, you must to render drupal messages manually.
2. With using '#ajax' key, there is no additional (custom) JS required.
3. On the button click the form is rebuilded, so, all you need is to place message rendering code inside the form logic.
Code example for the simple case:
function test_error_form(&$form, &$form_state) {
$form['test_error'] = array(
'#type' => 'button',
'#value' => t('Error'),
'#ajax' => array(
'callback' => 'test_error_error',
'wrapper' => 'the-error-container',
),
);
$form['test_warning'] = array(
'#type' => 'button',
'#value' => t('Error'),
'#ajax' => array(
'callback' => 'test_error_warning',
'wrapper' => 'the-error-container',
),
);
return $form;
}
function test_error_error($form) {
drupal_set_message("Header error", 'error');
return array(
'#type' => 'markup',
'#markup' => theme('status_messages'),
);
}
function test_error_warning($form) {
drupal_set_message("Header warning", 'warning');
return array(
'#type' => 'markup',
'#markup' => theme('status_messages'),
);
}
Note, that you must have div with id="the-error-container" on the page.
If you want to render new drupal messages on the standard place, try to use ajax commands, like this:
$commands = array();
$commands[] = ajax_command_replace($selector, theme('status_messages'));
return array(
'#type' => 'ajax',
'#commands' => $commands,
);
where $selector - is a css/jquery selector of your message area.
Please ask, if there is some unclear.