On initial select change, jquery does not update/render html in the view

Question

My view seems to be one step behind after a select change. I have a select/dropdown list that is populated with a getJSON request. After an initial selection, I verified in fiddler that the request was successful, but my view does not update. The crazy thing is that when I make another selection, thereafter, the view is then updated with the previous data, and continues on in this fashion. What am I missing?

Here is my HTML:

<div id="ClientSection">
<p>
    @Html.Label("clientId", "Client")
    @Html.DropDownListFor(x => x.PrimaryClient, Enumerable.Empty<SelectListItem>(), 
                          "Choose Client", new {id = "clientId"})
</p>

<table id="clientLocationsTable">
    <thead>
        <tr>
            <th>Region</th>
            <th>Location</th>
            <th>Address</th>
            <th>Suite</th>
            <th>City</th>
            <th>State</th>
            <th>Zip Code</th>
            <th>Phone #</th>
            <th>Email</th>
            <th>Contact</th>
          </tr>
        </thead>
          <tbody>

          </tbody>
    </table>
</div>

And my JavaScript:

@section scripts
{
<script>
    $(document).ready(function () {

        // populate main client dropdown
        $(function() {
            $.getJSON("/api/client/getclients/", function(data) {
                $.each(data, function (index, clientObj) {
                    $("#clientId").append(
                        $("<option/>").attr("value", clientObj.Id)
                            .text(clientObj.CompanyName)
                    );
                });
            });
        });

        // create new array
        var otherClientLocations = new Array();

        $("#clientId").change(function () {

            // clear table body
            $("#clientLocationsTable > tbody").empty();

            // create new array
            var clientList = new Array();

            // set the id
            var primaryId = $("#clientId").val();

            $.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {

                    // populate otherClientLocations Array
                    $.each(data, function(key, val) {
                        clientList.push(val);
                    });
                    otherClientLocations = clientList;
                });


            // create rows if needed
                    if(otherClientLocations.length > 0) {

                        $.each(otherClientLocations, function(key, val) {
                            $("#clientLocationsTable tbody")
                                .append("<tr><td>" + val.CompanyRegion +
                                    "</td><td>" + val.CompanyLocationCode + "</td>"
                            + "<td>" + val.CompanyAddress + "</td>" + "<td>" +
                            val.CompanySuite + "</td><td>" + val.CompanyCity +
                            "</td><td>" + val.CompanyState + "</td><td>" +
                             val.CompanyZipCode + "</td><td>" + val.CompanyPhoneNumber 
                            + "</td><td>" + val.CompanyEmail + "</td><td>" +
                             val.CompanyContactFn + " " + val.CompanyContactLn +
                             "</td>" + "</tr>");
                        });
                    }

        });
    });
</script>
}

Answer 1

You're not accounting for the fact that the json is being fetched asynchronously. You update the dom before the json has been returned from the server.

Try:

$(document).ready(function () {

    // populate main client dropdown
    $(function() {
        $.getJSON("/api/client/getclients/", function(data) {
            $.each(data, function (index, clientObj) {
                $("#clientId").append(
                    $("<option/>").attr("value", clientObj.Id)
                        .text(clientObj.CompanyName)
                );
            });
        });
    });

    // create new array
    var otherClientLocations = new Array();

    $("#clientId").change(function () {

        // clear table body
        $("#clientLocationsTable > tbody").empty();

        // create new array
        var clientList = new Array();

        // set the id
        var primaryId = $("#clientId").val();

        $.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {

            // populate otherClientLocations Array
            $.each(data, function(key, val) {
                clientList.push(val);
            });
            otherClientLocations = clientList;

            // create rows if needed (the section below has now been moved inside the callback
            if(otherClientLocations.length > 0) {

                $.each(otherClientLocations, function(key, val) {
                    $("#clientLocationsTable tbody")
                        .append("<tr><td>" + val.CompanyRegion +
                            "</td><td>" + val.CompanyLocationCode + "</td>"
                    + "<td>" + val.CompanyAddress + "</td>" + "<td>" +
                    val.CompanySuite + "</td><td>" + val.CompanyCity +
                    "</td><td>" + val.CompanyState + "</td><td>" +
                     val.CompanyZipCode + "</td><td>" + val.CompanyPhoneNumber 
                    + "</td><td>" + val.CompanyEmail + "</td><td>" +
                     val.CompanyContactFn + " " + val.CompanyContactLn +
                     "</td>" + "</tr>");
                });
            }
        });

    });
});

Clarification: While the http request is underway, javascript execution continues concurrently. Your version went something like this:

$.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {
  // update array AFTER request is complete
});
// update dom based on value of array while request is still in progress

I've moved some brackets around so that now it is:

$.getJSON("/api/client/getclientotherlocations/" + primaryId, function (data) {
  // update array AFTER request is complete
  // then update dom based on new version of array
});