在初步选择更改，jQuery不更新/呈现html中的视图

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 
});