1

Referring to my previous Question jQuery Ajax for three drop down

On page1)

I will select dropdown Building (populating from db) and dropdown Floor (by Ajax call)

then url will pass like: index.php?option=com_rsform&formId=8&form[Building][]=1&form[Floor][]=3

On Page2)

In dropdown Building showing the option with value 1 but dropdown Floor is only showing “please select” and NOT getting the value (which should be 3)

So in script I have to write if statement for floor ONLY, like if the floor getting value from url then show the value else run the script to call ajax for floor. Units in both cases (continue from another form or start fresh by form page) will get value by Ajax call.

here is code:

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);
            }
        });
    }
}

});
  • Have you tried getting the building value from the URL string? – Lodder Mar 1 '16 at 10:25
  • Building gets value from URL and having no problem. – allogos Mar 1 '16 at 10:27
  • @allogos please progress this abandoned page toward resolution. – mickmackusa Jan 28 at 11:44
1

Since you have the building and floor both in the url just add an if statement to your floor dropdown to add selected="selected" to the correct option.

Just as a note if your dropdown is only selecting a single building or floor there is no need to pass that data as an array, just pass it as a single integer. This code example would be based on passing a single integer rather than an array.

<?php
$JInput = JFactory::getApplication()->input;
$building = $JInput->get('building','','int');
$floor = $JInput->get('floor','','int');
?>

<select name="bulding">
<option value="1" <?php echo (($building== 1)?'echo 'selected="selected"':'');?>>Building 1</option>
<option value="2" <?php echo (($building== 2)?'echo 'selected="selected"':'');?>>Building 2</option>
<option value="3" <?php echo (($building== 3)?'echo 'selected="selected"':'');?>>Building 3</option>
</select>

<select name="floor">
<option value="1" <?php echo (($floor == 1)?'echo 'selected="selected"':'');?>>Building 1</option>
<option value="2" <?php echo (($floor == 2)?'echo 'selected="selected"':'');?>>Building 2</option>
<option value="3" <?php echo (($floor == 3)?'echo 'selected="selected"':'');?>>Building 3</option>
</select>

For the third dropdown you can use use the value from your floor variable to make an ajax call against your database and get whatever the result is for the third dropdown, then set the value of the third dropdown to that result.

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.