dependent dropdowns in ajax

Question

Searching for cascading ajax dropdown in this forum only gives me two discussions here and the other here

I have an almost similar issue only that the form select element I'm about to create cascades down in the 'taxonomy tree'. So each dropdown that was ajaxed will again be used to trigger another dropdown--in ajax...

Here is my sample module (trimmed down to relevant parts only):

function mainswitchboard($form,&$form_state){
    $form = array('#prefix'=>'', '#suffix'=>'');
    $form['maincategory'] = array(
        '#title'=>'Firs Select',
        '#type'=>'select',
        '#options'=>_populate_dropdowns(),
        '#ajax'=>array(
            'callback'=>'maincategory_callback',
            'wrapper'=>'wrapper-div',
            'method'=>'replaceWith' 
        )
    );
    return $form;
}

function maincategory_callback($form,$form_state){

   $from_element_name = $form_state['triggering_element']['#name'];

    $triggerer = $from_element_name;
    $value = $form_state['values'][$triggerer];

    drupal_set_message(time(). ' ' .$triggerer);

    $commands = array(); $arguments = array();
    if(count(_populate_dropdowns($value))) {
        $form['subcat_for_'.$value] = array(
            '#title'=>'Subcat for '.$value,
            '#type'=>'select',
            '#options'=>_populate_dropdowns($value),
            '#attributes'=>array('id'=>'subcat_for_'.$value,'name'=>'subcat_for_'.$value),


        );




         $arguments['ajax'] = array(
            'subcat_for_'.$value=>array(
                    'event'=>'change',
                    'callback'=>'maincategory_callback',
                    'wrapper'=>'wrapper-div',
                    'method'=>'replaceWith',
                    'url'=>'/drupal7/system/ajax',


            )
        );  

        $commands[] = ajax_command_settings($arguments,TRUE);

    } 



    $commands[] = ajax_command_insert(NULL, drupal_render($form));
    $commands[] = ajax_command_prepend(NULL, theme('status_messages'));
    return array('#type'=>'ajax','#commands'=>$commands);


}

The above code seems to work the only problem is you the second dropdown no longer produce results (although a throbber is showing when you click the second dropdown..) The second dropdown does not seem to honor the arguments variable, hence, it does not seem to call the function in its callback...

I'm stuck new drupaler...

Thanks!

Answer 1

You cannot change your $form in your ajax callback. Instead try to add a validate function with hook_form_alter on your form (or if in custom form just there) where your add a variable to your $form_state and don't forget $form_state['rebuild'] = TRUE. This will cause your form to rebuild (so form build function is called anew) In your form build function you can check this variable in $form_state and malipulate the form. In your ajax callback you need to replace the form element (ajax_command_replace)

So workflow will be: form build function - ajax trigger - form build function - form validation (set variable & rebuild) - form build function - ajax callback

Answer 2

Following URL helped me to fix this issue.

Issue was rebuilding second select list.

Dependent drop down list