Why does this code to create a dependent dropdown not work?

Question

I am trying to implement the dependent dropdown option in Drupal 7 from this URL http://w3shaman.com/article/creating-ajax-dropdown-drupal-7. When changing the first dropdown value, it is showing the loading indicator but no value is fetching in dependent dropdown.

Here is the code I have tried so far.

This is the code of form alter module

function xyz_mod_alter(&$form, &$form_state, $form_id) {
          $form['sandbox_ajax_dropdown']['province'] = array(
        '#title' => t('Province'),
        '#type' => 'select',
        '#options' => _load_province(),
        '#ajax' => array(
          'event'=>'change',
          'callback' =>'sandbox_ajax_dropdown_city',
          'wrapper' => 'city-wrapper',
        ),
      );
    
      // Wrapper for city dropdown list
      $form['sandbox_ajax_dropdown']['wrapper'] = array(
        '#prefix' => '<div id="city-wrapper">',
        '#suffix' => '</div>',
      );
    
      // Options for city dropdown list
      $options = array('- Select city -');
      if (isset($form_state['values']['province'])) {
        // Pre-populate options for city dropdown list if province id is set
        $options = _load_city($form_state['values']['province']);
      }
    
      // Province dropdown list
      $form['sandbox_ajax_dropdown']['wrapper']['city'] = array(
        '#title' => t('City'),
        '#type' => 'select',
        '#options' => $options,
      );
}

Code for loading the default value of province and fetching city data function

function sandbox_ajax_dropdown_city($form, $form_state) {
    return $form['sandbox_ajax_dropdown']['wrapper'];
}

function _load_province() {
        // fetch the data
        return $province;
}


function _load_city($province_id) {
        // fetch the data
        return $city;
}

I am not sure about the mistake I am doing. I copied the exact code from the given link. Even I tried to change as per my need but it is not working.

Answer 1

Without some kind of content, a prefix and suffix are not rendered. That means this element will not render anything on the page:

// Wrapper for city dropdown list
  $form['sandbox_ajax_dropdown']['wrapper'] = array(
  '#prefix' => '<div id="city-wrapper">',
  '#suffix' => '</div>',
);

As this is not rendered, the Ajax wrapper does not exist on page load to insert your content into. The solution is to add empty markup to force rendering of the prefix and suffix:

// Wrapper for city dropdown list
  $form['sandbox_ajax_dropdown']['wrapper'] = array(
  '#prefix' => '<div id="city-wrapper">',
  '#suffix' => '</div>',
  // Add empty markup to force rendering.
  '#markup' => '',
);