Question

当页面首次加载时调用函数updateAuctionInfo（id），它传递隐藏在输入字段中的Viechleid并检查日期参数是否未定义，然后它发出ajax请求，第一次页面加载它有效，但是当我选择日期表单datepicker并单击按钮时，它失败，有点jason数据从服务器返回，但是ajax.done（函数）但是没有语句再次在函数中执行，所以地图确实不再渲染

<script type="text/javascript" src="jquery.js"/>
<script type="text/javascript" src="jqueryui.js"/>
<h2>Tracks</h2>

隐藏的输入包含Vehicleid

<input type="hidden" id="Vehicleid" name="Vehicleid" value="1" />
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="row">             
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="text" id="datepicker" name="datepicker" class="form-control" />
                    </div>
                </div>
                <div class="col-md-4">
                    <input type="button" class="btn" id="btnsubmit" value="click"/>
                </div>  
        </div>
        <div class="row">
          <ul id="googleMaps" style="height:200px;" class="list-group"></ul>            
        </div>
    </div>
    <div class="col-md-2"></div>

</div>




<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script type="text/javascript">
    $(function () {

来自jquery ui的这个日期选择器，第一次加载它只是通过传递vehicleid进行ajx调用，然后从datepicker中选择值并单击按钮使得另一个jquery ajax但是在这里它停止工作，json来了但没有JavaScript被执行

        //$("#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 < 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 => " + numPoints);
                    $("#googleMaps").append('<li id="map' + i + '" style="height:100%;" class="list-group-item"></li><br/>');


                    for (var j = 0; j < 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 => " + arr[i][j].lat());
                        console.log("x => " + 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 +" =>"+ arr[i].length);
                    ini(14, arr[i], elmID);
                }
            }

            google.maps.event.addDomListener(window, 'load', aka);
        }
            );
    }


</script>

Answer 1

根据我的理解，在获得JSON响应后，您还必须更新DOM。所以在updateAuctionInfo（）之后你必须进行如下的ajax调用。这是相同的模板：

＆＃13;

function updateAuctionInfo(auctionId) {
$.ajax({
url: "/Auctions/JsonAuction/" + auctionId,
success: function (result) {
$('#Title').val(result.Title);
$('#Description').val(result.Description);
$('#CurrentPrice').html(result.CurrentPrice);
}
});
}

＆＃13;

在单击事件上多次调用ajax jquery失败

1 个答案: