0

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; 
}
  • Please don't use JRequest as it's deprecated in Joomla 3.x. You should be using JInput. As for the actual Ajax and trying to populate the 3rd dropdown, are you getting any browser console log errors? – Lodder Feb 29 '16 at 12:21
  • @Lodder thanks for advise, no i'm not getting any error. the 3rd dropdown is loading only by changing the 2nd dropdown. – allogos Feb 29 '16 at 12:25
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

  • replaced but not working. – allogos Feb 29 '16 at 13:13
  • Do you have a live preview I can look at? – Lodder Feb 29 '16 at 13:31
  • @allogos - Ok I'm just creating a JSFiddle and trying to replicate the issue. Will post back in a bit – Lodder Feb 29 '16 at 13:51
  • @allogos - See update^^^ – Lodder Feb 29 '16 at 14:00
  • Thanks, now 3rd dropdown loading but if you change the value of second dorpdown the 3rd will not change. please test my link again. – allogos Feb 29 '16 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.