Two birds with one AJAX call

Amazee Labs Current Affairs
If you're earning your life as a programmer, probability is high that you have implemented AJAX calls in forms before. For example when you want an area to update when the value of a field is changed by the user. If yes, this might be of interest to you: Drupal 7 provides an awesome AJAX framework that can be used without writing any JavaScript code most of the time. A detailed overview of the framework can be found over here:! One possible use case is that a user changes a form field. You then want another field to automatically change, plus some arbitrary html on the page. Here comes the problem: you cannot return form elements and render html at the same time in the AJAX callback function. A simple solution to this problem is to actually return the form elements already rendered. But let's first see how you implement the simple case, when you need to change only one form element: 'select', '#title' => t('Some select'), '#options' => array(1=> t('One'), 2 => t('Two'), 3 => t('Three')), '#default_value' => 1, '#ajax' => array( 'callback' => 'custom_test_ajax_form_ajax_submit', 'wrapper' => 'another_select' ), ); $form['another_select'] = array( '#type' => 'select', '#title' => t('Another select'), '#options' => array(4=> t('Four'), 5 => t('Five')), '#prefix' => '
', '#suffix' => '
', ); $form['some_number'] = array( '#markup' => '
' . t('Some random number') . '
', ); // If the form was submitted and the select box has the value 2, // change the options of the second select. if (isset($form_state['values']) && $form_state['values']['select_box'] == 2) { $form['another_select']['#options'] = array(6 => t('Six'), 7 => t('Seven'), 8 => t('Eight')); } $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), ); return $form; } ?>
If you want to only replace the “another_select” field, you can do something like this: And now, if you additionally want to put some random number in the “some_number” field, and change the page title, the previous approach will not work. So, here is the solution: $form_state['values']['select_box']))); $commands = array(); // Render the select element. $commands[] = ajax_command_replace('#another_select', drupal_render($form['another_select'])); // Render a random number in the #some_number div. $commands[] = ajax_command_html('#some_number', rand(0, 10000)); // Print the messages. $commands[] = ajax_command_prepend(NULL, theme('status_messages')); // Change the page title. $commands[] = ajax_command_html('#page-title', t('You selected: @number', array('@number' => $form_state['values']['select_box']))); return array('#type' => 'ajax', '#commands' => $commands); } ?> Basically, what you have to do is, instead of returning the form element or elements, to return an array with AJAX commands. To generate the html of any form element, you can use drupal_render(). Moreover you do not need the “wrapper” attribute anymore in the “#ajax” array for the “select_box” field. array( 'callback' => 'custom_test_ajax_form_ajax_submit', ), ?> Hope that helps, should you have to kill another two birds with one stone.

Stay in touch – join our newsletter!



Stay in the Loop

We will use the personal data you are sharing with us solely for the purpose of sending you our newsletter. See more here: Data Privacy.


Let us know how we can help you.