title: calling ajax jquery multiple times on click event fail
body: <p>When the page first load it calls the function updateAuctionInfo(id) ,it passes Viechleid hidden in the input filed and check if the date parameter is undefined ,then it makes ajax request,the first time the page load it works,but when i choose the date form datepicker and click the button ,it fails ,there is json data came back from the server on clicking ,but the ajax.done(function) but no statement get executed  in the function aka again,so the maps does not get rendered again </p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery.js"/&gt;
  &lt;script type="text/javascript" src="jqueryui.js"/&gt;
  &lt;h2&gt;Tracks&lt;/h2&gt;
  </code></pre>
  
  <p>the hidden input contains Vehicleid</p>
  
  <pre><code>&lt;input type="hidden" id="Vehicleid" name="Vehicleid" value="1" /&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-2"&gt;&lt;/div&gt;
      &lt;div class="col-md-8"&gt;
          &lt;div class="row"&gt;             
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" id="datepicker" name="datepicker" class="form-control" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;input type="button" class="btn" id="btnsubmit" value="click"/&gt;
                  &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;ul id="googleMaps" style="height:200px;" class="list-group"&gt;&lt;/ul&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  
  &lt;script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&amp;sensor=false"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
  </code></pre>
  
  <p>this date picker from jquery ui,the first time page load it makes ajx calls just by passing the vehicleid ,and choosing the value from datepicker and clicking the button it makes another jquery ajax but here where it stop working ,the json came but no JavaScript get executed </p>
  
  <pre><code>        //$("#datepicker").datepicker();
          $("#datepicker").datepicker({
              dateFormat: "yy-mm-dd",
              changeYear: true,
              changeMonth: true
          });
          var Vehicleid = $("#Vehicleid").val();
  
          $("#btnsubmit").on("click",function () {
  
              var dateInput = $("#datepicker").val();
              console.log(dateInput);
  
  
              updateAuctionInfo(Vehicleid, dateInput);
          });
  
          updateAuctionInfo(Vehicleid);
      });
  
  this function get passe to render a track on google maps
  
      function ini(Zoom, trackPoints, elementID) {
          var centerX = ((trackPoints[trackPoints.length - 1].lat() - trackPoints[0].lat()) / 2) + trackPoints[0].lat();
          var centerY = ((trackPoints[trackPoints.length - 1].lng() - trackPoints[0].lng()) / 2) + trackPoints[0].lng();
  
          var myCenter = new google.maps.LatLng(centerX, centerY)
  
          console.log("from insdie the fucntion " + trackPoints[0].lat());
          var mapProp = {
              center: myCenter,
              zoom: Zoom,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById(elementID), mapProp);
  
          var flightPath = new google.maps.Polyline({
              path: trackPoints,
              strokeColor: "#0000FF",
              strokeOpacity: 0.8,
              strokeWeight: 2
          });
  
          var marker = new google.maps.Marker({
              position: trackPoints[0],
              title: 'Click to zoom'
          });
  
          var marker2 = new google.maps.Marker({
              position: trackPoints[trackPoints.length - 1],
              title: 'Click to zoom'
          });
  
          flightPath.setMap(map);
          marker.setMap(map);
          marker2.setMap(map);
  
      }
      function updateAuctionInfo(id, date) {
  
          if (typeof date === 'undefined') {
              date = "2010-10-05";
  
          };
          $.ajax({
              url: "/Vehicle/Points/" + id + "?date=" + date,async :false
          }).done(function (result) {
              function aka() {
                  var numtracks = result.Tracks.length;
                  var arr = [];
                  if (numtracks == 0) { alert("9"); }
                  console.log("Tracks lenght : " + numtracks);
  
  
                  for (var i = 0; i &lt; numtracks; i++) {
                      var numPoints = result.Tracks[i].trackPoints.length;
                      var elmID = "map" + i; //ID for maps
                      console.log(elmID);
  
                      arr[i] = [];
                      console.log("*********Array number " + i + " Got created" + "and its lenght is " + arr[i].length + "   *******************");
                      console.log("Lenght of track #" + i + " Points =&gt; " + numPoints);
                      $("#googleMaps").append('&lt;li id="map' + i + '" style="height:100%;" class="list-group-item"&gt;&lt;/li&gt;&lt;br/&gt;');
  
  
                      for (var j = 0; j &lt; result.Tracks[i].trackPoints.length; j++) {
                          var x = result.Tracks[i].trackPoints[j].lat;
                          var y = result.Tracks[i].trackPoints[j].lng;
                          console.log("x= " + x + " for #" + j + "  Point");
                          console.log("y= " + y + "  for #" + j + "  Point");
                          var p = new google.maps.LatLng(x, y);
                          console.log("p befor push lat for the " + p.lat());
                          console.log("p befor push lng for the " + p.lng());
                          arr[i][j] = p;
                          console.log("x =&gt; " + arr[i][j].lat());
                          console.log("x =&gt; " + arr[i][j].lat());
                          console.log("track #" + i + " , point #" + j + " pushed into array x= " + arr[i][j].lat() + " ,y=" + arr[i][j].lng());
                          console.log(" array Length is " + arr[i].length);
                      }
                      // console.log(" array Length is #"+i +" =&gt;"+ arr[i].length);
                      ini(14, arr[i], elmID);
                  }
              }
  
              google.maps.event.addDomListener(window, 'load', aka);
          }
              );
      }
  
  
  &lt;/script&gt;
  </code></pre>