Loading Makes and Models

by Patrick Hund

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 margin-top">
            <select id="makes" class="form-control" data-preset="1900"></select>
        </div>
        <div class="col-sm-6 margin-top">
            <select id="models" class="form-control"></select>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 margin-top">
            <div id="console"></div>
        </div>
    </div>
</div>

CSS

#console {
    background-color: #000000;
    width: 100%;
    height: 200px;
    overflow: scroll;
    padding: 10px;
    border-radius: 4px;
    color: lime;
}
.margin-top {
    margin-top: 10px;
}

JavaScript

function log(msg) {
    $("#console").append(msg + "<br>");
}

function withDelay(ms) {
    var def = $.Deferred();
    window.setTimeout(function () {
        def.resolve();
    }, ms);
    return def;
}

function renderOptions(itemList) {
    var html = "";
    $.each(itemList, function () {
        html += "<option value=\"" + this.i + "\">" + this.n + "</option>";
    });
    return html;
}


function loadMakes() {
    return $.ajax({
        data: {
            _lang: "en"
        },
        dataType: "jsonp",
        jsonp: "_jsonp",
        jsonpCallback: "_onMakesLoadCallback",
        cache: true,
        url: "//m.mobile.de/svc/r/makes/Car"
    });
}

function loadModels(makeId) {
    return $.ajax({
        data: {
            _lang: "en"
        },
        dataType: "jsonp",
        jsonp: "_jsonp",
        jsonpCallback: "_onModelsLoadCallback",
        cache: true,
        url: "//m.mobile.de/svc/r/models/" + makeId
    });
}


function fillMakes() {
    var request = loadMakes();
    $("#makes").find("option").remove();
    request.done(function (result) {
        log("setting make options");
        $("#makes").append(renderOptions(result.makes));
        var preset = $("#makes").data("preset");
        if (preset !== undefined) {
            $("#makes").val(preset);
        }
    });
    return request;
}

function fillModels() {
    var makeId = $("#makes").find("option:selected").val(),
        request = loadModels(makeId);
    
    $("#models").find("option").remove();
    request.done(function (result) {
        log("setting model options for make " + makeId);
        $("#models").append(renderOptions(result.models));
        var preset = $("#models").data("preset");
        if (preset !== undefined) {
            $("#models").val(preset);
        }
    });
 }


fillMakes().then(fillModels);

$("#makes").change(fillModels);