Question

I’m not sure what I’m missing, when debugging I can see that my JSON response is good, but when I send the data to the template it doesn’t do anything.

Html:

<select id="SelectedCompany"></select>
<script id="SelectedCompanyTmpl" type="text/x-jquery-tmpl">
    <option value="${Id}">${Name}</option>
</script>

jQuery:

var selectedCompanyID = $("SelectedCompany");
// Load Companies through Jquery Templates
function GetCompanies() {
    $.getJSON("/api/Companies/GetAll", function (data) {
        selectedCompanyID.html('<option value="0"> -- Select Company -- </option>');
        // Oops I had this backwards :(
        // selectedCompanyID.tmpl(data).appendTo('#SelectedCompanyTmpl');
        $("#SelectedCompanyTmpl").tmpl(data).appendTo(selectedCompanyID);

        selectedCompanyID.append('<option value="new">Add New Company</option>');
    });
}

Json Result:

[{"Id":1,"Name":"Company 1","Website":"url1",},{"Id":2,"Name":"Company 2","Website":"url2"}]

My select just has the “Select” and “Add New” options, any ideas?

Answer 1

Bah, I realized it after I re-read it on here, I had switched the template and the main body ids:

// Oops I had this backwards :(
// selectedCompanyID.tmpl(data).appendTo('#SelectedCompanyTmpl');
$("#SelectedCompanyTmpl").tmpl(data).appendTo(selectedCompanyID);

I’ll leave up the post for anyone looking for an example of how to use JQuery Templates with Select options though