Ajax error on dependent dropdown. Drupal 7

Question

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, &$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' => 'select',
        '#title' => 'How do you categorize the term ?', 
        '#options' => $first_options,
        '#default_value' => $selected,
        '#ajax' => array(
            'callback' => 'ajax_step2_select_callback',
            'wrapper' => 'second-select-box-replace',
        ),

    );

    $form['second_select_box'] = array(
    '#type' => 'select',
    '#title' => 'Choose',
    '#prefix' => '<div id="second-select-box-replace">',
    '#suffix' => '</div>',
    '#options' => _ajax_example_get_second_dropdown_options($selected),
    '#default_value' => 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->tid;

           }

    $terms = taxonomy_get_children($tid);

    foreach ($terms as $term){

        $options[$term->tid] = $term->name;

    }

    return $options;
}

Answer 1

You need to remove the line

'#options' => _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' => 'markup',
  '#prefix' => '<div id="second-select-box-replace">',
  '#suffix' => '</div>',
);

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'] => 'Choose';
  }
}