[Drupal] How to use ajax_command_replace?
To replace a div by another on submitting a form always used to top the list of requirements. So I've choose to share how to use a handy command provided by ajax to replace a particular div by another.
Let us consider having a form, on submitting the form let it replace the form by a successful message. To do this, here consider a form with name and a submit button.
function sample_ajax_form($form, &$form_state) {
$form['#prefix'] = '<div id="div-example">';
$form['#suffix'] = '</div>';
$form['captcha'] = array(
'#type' => 'textfield',
'#value' => t('Name'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Calculate'),
'#ajax' => array(
'callback' => 'sample_ajax_form_callback',
'wrapper' => 'div-example',
),
);
function sample_ajax_form_callback($form, &$form_state) {
$commands = array();
$output = '<div id = "div-example">' . 'Your form submitted successfully' . '</div>';
$commands[] = ajax_command_replace('#div-example', $output);
$element = array(
'#type' => 'ajax',
'#commands' => $commands
);
return $element;
}
Here we have created a,
function sample_ajax_form, $form['#prefix'] and $form['#suffix']
represents the div in which the form is included. The form is inclined in div-example. If the form is submitted through ajax, then on the submit button specify #ajax. #ajax is an array that include callback and the div in which the form is embedded.
On the callback, the div containing form that is, div-example is wrapped around the message we want to display instead of the form after submitting it.
After submitting the form you could see a success message. Hope some one would find this article helpful. Please let us know if we can be of any further help.