progressively load records with AJAX!

<h4>AJAJ-style "AJAX" in progressive record loading:</h4>
<div id="records">
   <div class='altout'>
      <div class='in'>License Number</div>
      <div class='in'>Expiration Date</div>
      <div class='in'>Must Wear Glasses?</div>
   </div>
</div>
@Html.Partial("Next", "Three")
<script type="text/javascript">
   $(function () {
      var collection = new Array();
      collection.length = @ViewBag.OneThirdOfRecordCount;
      var counter = 0;
      $(collection).each(function () {
         $('#records').animate({ opacity: "1" }, 100, function () {
            $.ajax({
               type: "POST",
               url: '/Ajax/GetPageOfRegisteredDriverRecordSet/' + counter,
               dataType: 'json',
               success: function (result) {
                  $.each(result, function(index, value) {
                     var html = "<div class='out'>";
                     html = html + "<div class='in'>" + value.Id + "</div>";
                     html = html + "<div class='in'>" + value.Date + "</div>";
                     html = html + "<div class='in'>" + value.Bool + "</div>";
                     html = html + "</div>";
                     $('#records').append(html);
                  });
                }
            });
            counter = counter + 3;
         });
      });
   });
</script>

 
 

@Html.Partial("Next", "Three") does not apply to the example. It was just in my code. Don't let it trip you up. Also, I have the loop getting three records at time. The three is hard coded into the C# behind /Ajax/GetPageOfRegisteredDriverRecordSet/ and thus cannot be seen. I should probably pass it in somehow, huh?