jQuery Ajax for three drop down

Question

Hi i have three dropdown, The first one populating value from database, Second and third will get their values by ajax call.

And the problem is at first loading of the page when i'm selecting the first dropdown the second dropdown change from please select and showing its value but third one is not showing and stay on "please select..." UNLESS i'm changing the value of second dropdown to anyother value and then values of third dropdown will appearing.

here is javascript:

<script type="text/javascript">
jQuery(function($){
$(document).ready(function() {
var Floor_id = 'Floor';
var Building_id = 'Building';
var Unit_id = 'Unit';
var initial_Floor_html = '<option value="">Please select...</option>';
var initial_Unit_html = '<option value="">Please select...</option>';
$('#'+Floor_id).html(initial_Floor_html);
$('#'+Unit_id).html(initial_Unit_html);

$('#'+Building_id).change(function(e) {
var selectfvalue = $(this).val();

//Display 'loading' status in the target select list
$('#'+Floor_id).html('<option value="">Loading...</option>');

if (selectfvalue == "") {

   $('#'+Floor_id).html(initial_Floor_html);
} else {
  //Make AJAX request, using the selected value as the GET
  $.ajax({
          url: 'index.php',
          data:'option=com_parkingreservation&task=getFloorsHTML&fvalue='+selectfvalue,
         success: function(output) {
            //alert(output);
            $('#'+Floor_id).html(output);
        },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " "+ thrownError);
      }});
    }
});

 $('#'+Floor_id).change(function(e) {
var selectuvalue = $(this).val();

//Display 'loading' status in the target select list
$('#'+Unit_id).html('<option value="">Loading...</option>');

if (selectuvalue == "") {

   $('#'+Unit_id).html(initial_Unit_html);
} else {
  //Make AJAX request, using the selected value as the GET
  $.ajax({
          url: 'index.php',
          data:'option=com_parkingreservation&task=getUnitsHTML&uvalue='+selectuvalue,
         success: function(output) {
            //alert(output);
            $('#'+Unit_id).html(output);
        },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " "+ thrownError);
      }});
    }
});
 });
 });
 </script>

and for ajax:

}
public function getFloorsHTML() {

     $db = JFactory::getDbo();
     $query = $db->getQuery(true);
     $myfloors = JRequest::getVar ('fvalue');
     $query->select($db->quoteName(array('id', 'floor_name')));
     $query->from($db->quoteName('#__pk_floors'));
     $query->where($db->quoteName('building')." = ".$db->quote($myfloors));
     $db->setQuery($query);
     $results = $db->loadObjectList();
     foreach ($results as $result) 
     {
       echo '<option value="' . $result->id . '" > ' . $result->floor_name.'</option>'; 
      }
    exit; 
}
public function getUnitsHTML() {

     $db = JFactory::getDbo();
     $query = $db->getQuery(true);
     $myunits = JRequest::getVar ('uvalue');
     $query->select($db->quoteName(array('id', 'unit_number')));
     $query->from($db->quoteName('#__pk_units'));
     $query->where($db->quoteName('floor')." = ".$db->quote($myunits));
     $db->setQuery($query);
     $results = $db->loadObjectList();
     foreach ($results as $result) 
     {
       echo '<option value="' . $result->id . '" > ' . $result->unit_number.'</option>'; 
      }
    exit; 
}

Answer 1

I think I know the issue here. The .change() function is not being executed because the content is being change dynamically, therefore you need event delegation.

On your 2nd event, try replacing:

$('#'+Floor_id).change(function(e) {

with:

$(document).on('change', '#'+Floor_id, function(e) {

---

Update 1:

I created a JSFiddle to replicate what you were doing and instead, changed your second event to a function instead, which gets called if the first Ajax request comes back as a success.

Please try replacing ALL your code with this.

jQuery(document).ready(function($) {

    var Floor_id    = $('#Floor');
    var Building_id = $('#Building');
    var Unit_id     = $('#Unit');
    var initial_Floor_html = '<option value="">Please select...</option>';
    var initial_Unit_html  = '<option value="">Please select...</option>';

    Floor_id.html(initial_Floor_html);
    Unit_id.html(initial_Unit_html);

    Building_id.on('change', function(e) {

        var selectvalue = $(this).val();

        //Display 'loading' status in the target select list
        Floor_id.html('<option value="">Loading...</option>');

        if (selectvalue == '') 
        {
            Floor_id.html(initial_Floor_html);
        } 
        else 
        {
            //Make AJAX request, using the selected value as the GET
            $.ajax({
                url: 'index.php',
                data:'option=com_parkingreservation&task=getFloorsHTML&fvalue='+selectvalue,
                success: function(output) {
                    Floor_id.html(output);
                    updateSelect(Floor_id.val());
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status +  ' ' + thrownError);
                }
            });
        }
    });

    Floor_id.on('change', function(e) {
        updateSelect($(this).val());
    });

    function updateSelect(selectvalue) 
    {
        //Display 'loading' status in the target select list
        Unit_id.html('<option value="">Loading...</option>');

        if (selectvalue == '') 
        {
            Unit_id.html(initial_Unit_html);
        } 
        else 
        {
            //Make AJAX request, using the selected value as the GET
            $.ajax({
                url: 'index.php',
                data:'option=com_parkingreservation&task=getUnitsHTML&uvalue='+selectvalue,
                success: function(output) {
                    Unit_id.html(output);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status + ' ' + thrownError);
                }
            });
        }
    }

});

I've made some other small improvements along the way too