Question

I am creating a Year-Make-Model chooser.

Initially, all three select boxes are disabled (and have no options). The “years” dropdown loads based on a DB query run via .get(), which loads in the blink of an eye.

Upon selection of a year, a list of makes are loaded based on the year chosen. This is where it breaks down, not loading makes to allow successive loading of models under that make.

Visualization:

[Years-----v]
[-Make-----v]
[-Model----v]

After choosing a year

[1978------v]
[Makes-----v]
[-Model----v]

Here is the JavaScript I am using to accomplish this:

<script type="text/javascript">
    $(function() {
        // LOAD YEARS
        $.get("/ymm/get.php", { func: "get_years", select_name: "year_select" },
            function(data){
                $("#ymm_year_select").html(data);
            });

        // LOAD MAKES
        $("#year_select").on("change", function() {
            var selected_value = $(this).val();

            $.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value },
                function(data){
                    $("#ymm_make_select").html(data);
                });
        });

        // LOAD MODELS
        $("#make_select").on("change", function() {
            var selected_value = $(this).val();

            $.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value },
                function(data){
                    $("#ymm_model_select").html(data);
                });
        });

    });
</script>

And for reference, here is what /ymm/get.php looks like:

<?php
header("Expires: Mon, 26 Jul 1990 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

include("../includes/class/PhpConsole.php");
PhpConsole::start();
include("../includes/configure.php");
include("../includes/class/DB.class.php");

/////////////////////////////////////////////////////////////////////////

function make_select($name, $data, $id = NULL) {
$id = (NULL === $id ? $name : $id);

?>
<select name="<?=$name?>" id="<?=$id?>">
    <option>--Select--</option>
    <?php
        if(!empty($data)) {
            foreach($data as $val => $display) {
    ?>
    <option value="<?=$val?>"><?=$display?></option>
    <?php
            }
        }
    ?>
</select>
<?php
}

$sql['get_years'] = "SELECT DISTINCT(`year`) FROM `ymm` WHERE `id` IN(SELECT `ymm` FROM `ymm_to_products` WHERE `products_id` IS NOT NULL AND `products_id` != '') ORDER BY `year` ASC";
$sql['get_makes'] = 'SELECT DISTINCT(`name`), `id` FROM `make` WHERE `id` IN(SELECT `make_id` FROM `ymm` WHERE `year`=%04d) ORDER BY `name` ASC';
$sql['get_models'] = 'SELECT DISTINCT(`name`), `id` FROM `model` WHERE `make_id`=(SELECT `id` FROM `make` WHERE `name` = \'%s\') ORDER BY `name`';

if(isset($_GET['func'])) {
$func = trim($_GET['func']);
$control_name = $_GET['select_name'];

    switch($func) {
        case 'get_years':
        debug('YEARS!');
        $years = DB::select_all($sql['get_years']);

        if(false !== $years && !empty($years)) {
            foreach($years as $year) {
                $year = intval($year['year']);
                $data[$year] = $year;
            }
        }

        make_select($control_name, $data);
        die();
        break;
        case 'get_makes':
        debug('MAKES!');
        $year = (int) $_GET['year'];
        $makes = DB::select_all(sprintf($sql['get_makes'], $year));

        if(false !== $makes && !empty($makes)) {
            foreach($makes as $make) {
                $name = $make['id'];
                $data[$name] = $make['name'];
            }
        }

        make_select($control_name, $data);
        die();
        break;
        case 'get_models':
            debug('MODELS!');
            $make = strip_tags(trim($_GET['make']));
            $models = DB::select_all(sprintf($sql['get_models'], $make));

            if(false !== $models && !empty($models)) {
            foreach($models as $model) {
                $name = $model['id'];
                $data[$name] = $model['name'];
                }
            }

            make_select($control_name, $data);
            die();
        break;
    }
}

?>

It loads the makes (and PhpConsole outputs “YEARS!”, but never “MAKES!” or “MODELS!”.

Should I be using jquery’s .bind() or .live()?

---

I’ve supplied an answer to my own question.

Answer 1

As it turned out, I needed to attach the .on() event to a containing (parent) element so that it could “bubble down” or whatever. Since the target element is loaded dynamically from the previous request, it has to be done this way:

...
// LOAD MAKES
$("#application-search").on("change", "#year_select", function() {
var selected_value = $("#year_select").val();

$.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value },
    function(data){
        $("#ymm_make_select").html(data);
    });
});

// LOAD MODELS
$("#application-search").on("change", "#make_select", function() {
var selected_value = $("#make_select").val();

$.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value },
    function(data){
        $("#ymm_model_select").html(data);
    });
});
...