jQuery Templates - Replace DIV content

Question

So I'm using jQuery templates and have the following code working in my application:

@using (Html.BeginForm())
    {
        @Html.DropDownList("StateList",
                            Model.States,
                            "< Select >"
                            )

        <div id="designCenters"></div>

        <script id="designCenterTemplate" type="text/html">
            <p><li>${Name}</li></p>
        </script>           
    }

    <script language="javascript" type="text/javascript">
        $("#StateList").change(function () {
            $.getJSON("/api/designcentersbystate/" + $(this).val(), 
              function (data) { 
                  $("#designCenterTemplate").tmpl(data).appendTo("#designCenters")
               });
        });
    </script>

Since I'm calling .appendTo in the callback function parameter of the template function, obviously the list of design centers is added to the list. My goal is to REPLACE the content within <div id="designCenters"> with the templated results.

Looking for the most efficient way to do this.

Thanks.

Answer 1

Change the success function like so:

function (data) { 
    $("#designCenters").html($("#designCenterTemplate").tmpl(data))
}

Or you could empty the container each time.

$("#designCenters").empty();
$("#designCenterTemplate").tmpl(data).appendTo("#designCenters");

Answer 2

You can replace the html in an element like this:

$("#designCenters").html(YOUR HTML HERE);