Question

在选择更改后，我的观点似乎落后了一步。我有一个用getJSON请求填充的选择/下拉列表。在初步选择之后，我在提琴手中验证了请求是否成功，但我的视图没有更新。疯狂的是，当我进行另一个选择时，之后，视图随后用之前的数据更新，并以这种方式继续。我错过了什么？

这是我的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>

我的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

您没有考虑到json是异步获取的事实。您在从服务器返回json之前更新dom。

尝试：

$(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>");
                });
            }
        });

    });
});

澄清：当http请求正在进行时，javascript执行会同时继续。你的版本是这样的：

$.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

我已经移动了一些括号，现在它是：

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

在初始选择更改时，jquery不会在视图中更新/呈现html

1 个答案: