Drupal 7 - How to make dynamic select box through Drupal #ajax framework

In Drupal 7 we often need few select boxes to be dependent themselves that means the child select box options are dependent on the parent field's selected option. A very nice example could be Country, State, City those normally has dependency.

Though the trick behind Drupal 7 ajax framework is quite simple but it takes quite a time for a first timer as usual ;) . In this post, I have explained a similar example that does the same with no JS required (Drupal 7 does it behind the screen).

The Example:
I have a Drupal 7 vanilla instance, that has article content type by default. Article content type has 2 select box field depending on each other, Parent field called : Datatype (field_data_type) and child field called as Subdata(field_sub_data).

Apart form the Durpal 7 content type config, I am using a custom module named as 'common' and only a hook_form_alter to modify the form.

So, Lets start by hooking the form :
The form alter:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
/**
 *
 * Implements form_alter();
 * @param type $form
 * @param type $form_state
 * @param type $form_id
 */
function common_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'article_node_form') {

    // Add Ajax callback to parent field.
    $form['field_data_type'][LANGUAGE_NONE]['#ajax'] = array(
        'callback' => 'common_data_type_callback',
        'wrapper' => 'sub-data-container',
    );

    // Add Wrapper div to child field
    $form['field_sub_data']['#prefix'] = '<div id="sub-data-container">';
    $form['field_sub_data']['#suffix'] = '</div>';
}

All this form alter does is, adding an #ajax element to parent field that says Drupal 7 that this field has an ajax callback. which will trigger a function called 'common_data_type_callback' as mentioned in the array.
The next element passed to #ajax array is 'wrapper'. As the name suggests, It searches a DOM that has an id attrib called 'sub-data-container' which we are setting up on our child field(Adding prefix n suffix to child field keeping the id as same as wrapper value in #ajax).

As we are done with writing our form alter we should writing another function as mentioned 'callback'. Here how it should look like :

The ajax callback response:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
/**
 * Ajax callback function on change of field_data_type
 * This function just returns the replaceable content. all logic written on form_alter.
 * @param type $form
 * @param type $form_state
 * @return type
 */
function common_data_type_callback($form, $form_state) {
  return $form['field_sub_data'];
}
?>

The above callback function only returns back the child field to Drupal when the ajax callback triggers. So, how the options in the child field gets changed. We are not done yet. We have feed the options to second field inside the hook_form_alter with a condition so that the options will be fill in only when there is parent data.

Internally hook_form_alter invokes again even when a ajax callback happens, which is often being called as form gets rebuild.

So below code shows the logic that feeds options to child for each of the parent field data. Just keep it inside the hook_form_alter. It should work fine.

Switching child field options
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
    // When ajax callback comes or form reloads with data in it.
    // Child field should have appropriate options in it.
    if (isset($form_state['values']['field_data_type'][LANGUAGE_NONE][0]['value'])) {
      $subdata_options = array();
      switch ($form_state['values']['field_data_type'][LANGUAGE_NONE][0]['value']) {
        case 'month':
          $subdata_options = array(
              '' => '-- Please Select Month -- ',
              'jan' => 'January',
              'feb' => 'February',
              'mar' => 'Marach',
          );
          break;
        case 'week':
          $subdata_options = array(
              '' => '-- Please Select Day --',
              'sun' => 'Sunday',
              'mon' => 'Monday',
              'tue' => 'Tuesday',
          );
          break;
      }
      $form['field_sub_data'][LANGUAGE_NONE]['#options'] = $subdata_options;
    }
?>

The same procedure should work with other type of fields as well. Hopefully this post helps somebody building a dynamic/dependable fields.

NOTE: If you are copying code from here, make sure you remove the php tags and clear cache after your form alter written.

Comments

Post a Comment

Popular posts from this blog

Filtering and Sorting a Doctrine Arraycollection

ArrayCollection object has so many useful in-build methods, that makes ArrayCollection superior comparable to normal PHP array. This post is about how to filter and sort an ArrayCollection so output of elements can be in certain order or filtered. Filter To filter we can use ArrayColleciton in-build filter method , which takes a predicate and returns all the elements satisfied by the predicate provided, keeping the order of the elements intact. A code example would be nice. Code Example : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php /** * @var \Doctrine\Common\Collections\Collection */ $locations ; // ArrayCollection() variable that has $location object in its element. // To filter active locations. $activeLocations = $locations -> filter ( function ( $location ) { return $location -> getStatus (); // filter based on status. }); // Now $activeLocations holds all locaitons from $locations those have an active locaiton. ?> Sort Arra...
Read more

Doctrine mapping (ORM) with Database (DAL), Unidirectional vs Bidirectional.

Creating relationships inside a database is a very common thing for an web developer. Respecting to to RDBMS concept, we can create any sort of relationship inside a database. Things get changed when we have to use Doctrine for the mapping with database. Initially this made pretty much confused to me. Only after live working examples and few docs, I could able to get rid of it somehow. This post is about Doctrine mapping and difference between Unidirectional and Bidirectional relationship. What is Doctrine ? Doctrine is a set of PHP libraries that provides persistence services that is helpful managing PHP objects with Database layer. That means it creates a bridge between PHP light weight mapped objects and Database Objects. So Doctrine provides how to map PHP objects internally by its ORM (Object Relational Mapper) and its DB layer (DAL : Database Abstraction Layer) provides a unique object based query language(DQL : Doctrine Query Language) to write db queries independent of data...
Read more

Symfony 2 How to keep cloned entity properties unchanged on change of main entity.

Often while we clone an entity, we find the property of new cloned entity gets changed based on changes to the main entity. Mostly when the change occurs on $form->handleRequest($request); Below magic function restricts the properties to keep their value unchanged by cloning deeper state of relationships. Code Example : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php /** * clone */ public function __clone () { if ( $this -> id ) { // Remove orm reference to DB. $this -> id = null ; // Collect books to clone so that any further change to books in // main entity won't affect the cloned entity. $this -> books = clone $this -> books ; } } ?>
Read more