Ajax error on dependent dropdown. Drupal 7 I am trying to get the following dependent dropdown to work, however I constantly get the following error. So far could not figure out what the problem is. I was wondering if anyone has had a similar problem and might have the solution for it.


  An AJAX HTTP error occurred. HTTP Result Code: 200 Debugging
  information follows. Path: /?q=system/ajax StatusText: OK
  ResponseText: stringstring(1) "2" array[ {"command":"settings",
  "settings":{"basePath":"\u002F", "pathPrefix":"",
  "ajaxPageState":{"theme":"bartik",
  "theme_token":"Ghiw-ikiaoP9ioC23jfb6h1vvIuA4G_nb3NBGO0mfEA"},
  "overlay":{"paths":{"admin":"node\u002F*\u002Fwebform\u000Anode\u002F*\u002Fwebform\u002F*\u000Anode\u002F*\u002Fwebform-results\u000Anode\u002F*\u002Fwebform-results\u002F*\u000Anode\u002F*\u002Fsubmission\u002F*\u000Anode\u002F*\u002Fedit\u000Anode\u002F*\u002Fdelete\u000Anode\u002F*\u002Frevisions\u000Anode\u002F*\u002Frevisions\u002F*\u002Frevert\u000Anode\u002F*\u002Frevisions\u002F*\u002Fdelete\u000Anode\u002Fadd\u000Anode\u002Fadd\u002F*\u000Aoverlay\u002Fdismiss-message\u000Auser\u002F*\u002Fshortcuts\u000Aadmin\u000Aadmin\u002F*\u000Abatch\u000Ataxonomy\u002Fterm\u002F*\u002Fedit\u000Auser\u002F*\u002Fcancel\u000Auser\u002F*\u002Fedit\u000Auser\u002F*\u002Fedit\u002F*",
  "non_admin":"admin\u002Fstructure\u002Fblock\u002Fdemo\u002F*\u000Aadmin\u002Freports\u002Fstatus\u002Fphp"},
  "pathPrefixes":[  ], "ajaxCallback":"overlay-ajax"}}, "merge":true},
  {"command":"insert", "method":null, "selector":null, "data":"\u003Cdiv
  id=\u0022second-select-box-replace\u0022\u003E\u003Cdiv
  class=\u0022form-item form-type-select
  form-item-second-select-box\u0022\u003E\u000A  \u003Clabel
  for=\u0022edit-second-select-box--2\u0022\u003EChoose
  \u003C\u002Flabel\u003E\u000A \u003Cselect
  id=\u0022edit-second-select-box--2\u0022
  name=\u0022second_select_box\u0022
  class=\u0022form-select\u0022\u003E\u003Coption
  value=\u00227\u0022\u003ECountries\u003C\u002Foption\u003E\u003Coption
  value=\u00223\u0022\u003EUniverse\u003C\u002Foption\u003E\u003C\u002Fselect\u003E\u000A\u003C\u002Fdiv\u003E\u000A\u003C\u002Fdiv\u003E",
  "settings":null}, {"command":"insert", "method":"prepend",
  "selector":null, "data":"", "settings":null} ]


Here is the code:

function form_new_term_step_two($form, &amp;$form_state){

    $first_options = _step2_first_options_select_box();

    $selected = isset($form_state['values']['first_select_box']) ? $form_state['values']['first_select_box'] : key($first_options);
    //var_dump($selected);

    $form['first_select_box']= array(
        '#type' =&gt; 'select',
        '#title' =&gt; 'How do you categorize the term ?', 
        '#options' =&gt; $first_options,
        '#default_value' =&gt; $selected,
        '#ajax' =&gt; array(
            'callback' =&gt; 'ajax_step2_select_callback',
            'wrapper' =&gt; 'second-select-box-replace',
        ),

    );

    $form['second_select_box'] = array(
    '#type' =&gt; 'select',
    '#title' =&gt; 'Choose',
    '#prefix' =&gt; '&lt;div id="second-select-box-replace"&gt;',
    '#suffix' =&gt; '&lt;/div&gt;',
    '#options' =&gt; _ajax_example_get_second_dropdown_options($selected),
    '#default_value' =&gt; isset($form_state['values']['second_select_box']) ? $form_state['values']['second_select_box'] : '',
  );


    return $form;
}


/*
 * All the Submit and Callback fucntions
 */
function ajax_step2_select_callback($form, $form_state){

    return $form['second_select_box'];

}

function _ajax_example_get_second_dropdown_options($selected= Null){

    $results =  taxonomy_get_term_by_name($selected);
    $tid = array();
    foreach ($results as $objs){

        $tid = $objs-&gt;tid;

           }

    $terms = taxonomy_get_children($tid);

    foreach ($terms as $term){

        $options[$term-&gt;tid] = $term-&gt;name;

    }

    return $options;
}
You need to remove the line

'#options' =&gt; _ajax_example_get_second_dropdown_options($selected),


Then, put your function call and update the #options on some condition. So, something like this:

if(isset($form_state['values']['first_select_box'])) {
  if($form_state['values']['first_select_box'] == 'something'){
    //the contents of your _ajax_example_get_second_dropdown_options function here
    //and instead of returning something... just SET #options to your new output.
    $form['second_select_box']['#options'] = 'new stuff';
  }
}


Furthermore, most of the time people will not even show the second select box until the first one is filled out with something useful for the second. In that case, you can set the #type of the second select box to 'markup' and then in that above if statement SET the #type to select.

$form['second_select_box'] = array(
  '#type' =&gt; 'markup',
  '#prefix' =&gt; '&lt;div id="second-select-box-replace"&gt;',
  '#suffix' =&gt; '&lt;/div&gt;',
);

if(isset($form_state['values']['first_select_box'])) {
  if($form_state['values']['first_select_box'] == 'something'){
    //the contents of your _ajax_example_get_second_dropdown_options function here
    //and instead of returning something... just SET #options to your new output.
    $form['second_select_box']['#type'] = 'select';        
    $form['second_select_box']['#options'] = 'new stuff';
    $form['second_select_box']['#title'] =&gt; 'Choose';
  }
}