0

我在对 asmx 页面进行 ajax 调用时遇到问题,该页面返回添加到 div 的值。问题是即使我总是从 asmx 页面取回数据。该值不会写入 div。这很令人沮丧,因为我知道它在起作用。但数据不会写入 div。可能给这个问题增加一些复杂性是我正在使用谷歌地图 api。

我会发布代码,但它非常大,我怀疑它是否适合。但这是我的 ajax 调用。

function loadPropertyInfo(propertyid) {
    $.ajax({
        type: "POST",
        url: "PropertyViewPropertyInfo.asmx/getPropertyInfo",
        contentType: "application/json; charset=utf-8",
        data: "{'pid': '" + propertyid + "'}",
        dataType: "json",
        success: function (msg) {
            $("#bodyContent" + propertyid).html(msg.d);
            //alert(msg.d);
            unescape
        },
        error: AjaxFailed
    });
}

这是问题所在。.html 部分并不总是写入 div。

$("#bodyContent" + propertyid).html(msg.d);

但是,如果我取消注释警报,警报弹出时总会有数据。但是没有写入div。

还有其他人遇到这个问题吗?

我可以尝试一下以查看信息是否写入 div 吗?如果不重新运行ajax调用?

这是很长的代码。


        <script type="text/javascript">
            $(document).ready(function () {
            });
            function loadPropertyInfo(propertyid) {
                $.ajax({
                    type: "POST",
                    url: "PropertyViewPropertyInfo.asmx/getPropertyInfo",
                    contentType: "application/json; charset=utf-8",
                    data: "{'pid': '" + propertyid + "'}",
                    dataType: "json",
                    success: function (msg) {
                        $("#bodyContent" + propertyid).html(msg.d);
                        //alert(msg.d);
                        unescape
                    },
                    error: AjaxFailed
                });
            }
            function loadEntityInfo(propertyid) {
                $.ajax({
                    type: "POST",
                    url: "PropertyViewEntityInfo.asmx/getEntityInfo",
                    contentType: "application/json; charset=utf-8",
                    data: "{'pid': '" + propertyid + "'}",
                    dataType: "json",
                    success: function (msg) {
                        $("#propertyentityinfo" + propertyid).html(msg.d);
                        unescape
                    },
                    error: AjaxFailed
                });
            }
            function AjaxSucceeded(result, propertyid) {
                //alert(result.d);
                var divid = "#propertyentityinfo" + propertyid;
                $(divid).text(result);
            }
            function AjaxFailed(result) {
                alert(result.status + ' ' + result.statusText);
            }
        </script>
        <script type="text/javascript">
            var map;
            var mgr;
            var batch = [];
            function initialize() {
                // get the lat lon for the property
                var latlng = new google.maps.LatLng(25.7367330, -80.3158520);
                // map options
                var myOptions = {
                    zoom: 13,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scaleControl: true,
                    overviewMapControl: true,
                    overviewMapControlOptions: {
                        opened: true
                    }
                };
                // map manager options
                var mgrOptions = {
                    borderPadding: 50,
                    maxZoom: 15,
                    trackMarkers: true
                };
                // setup the map
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                // start the marker manager
                mgr = new MarkerManager(map, mgrOptions);
                // drop the marker for the property
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Property",
                    zIndex: 5,
                    animation: google.maps.Animation.DROP
                });
                var contentString = "<img id=\"image\" width=\"150\" height=\"100\" style=\"margin: 5px 0;\" src=\"http://maps.google.com/cbk?output=thumbnail&w=150&h=100&ll=25.7367330,-80.3158520\" onclick=\"streetview(25.7367330,-80.3158520)\" onerror=\"imgLoadErr(this)\" alt=\"image\" />";
                var infowindow = new google.maps.InfoWindow({ content: contentString });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
                // wait for loaded and add markers
                google.maps.event.addListener(mgr, 'loaded', function () {
                    createMarkers(map, mgr)
                });
            }
            // create the markers for entities
            function createMarkers(map, mgr) {
                // find map bounds
                var bounds = new google.maps.LatLngBounds();
                // get the points for the properties and entities from code behind
                var latlng1 = new google.maps.LatLng(25.8955829, -80.2951000);
                var marker1;
                batch.push(marker1 = new google.maps.Marker({ position: latlng1, map: map, icon: '/images/condominium.png', title: "Los Palacios by Miami Lakes Condo Assoc.", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString1 = '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>Los Palacios by Miami Lakes Condo Assoc.<br />8001 L W 6th Avenue<br />Hialeah, FL 33014<br /></p><p>Neighborhood Property Management<br />Mayra Ruiz <br />Phone: 3058192361<br /> </p><a href="PropertyView.aspx?id=6542&entitytoadd=19">Add to Property</a> </div></div>';
                var infowindow1 = new google.maps.InfoWindow({ content: contentString1 });
                google.maps.event.addListener(marker1, 'click', function () { infowindow1.open(map, marker1); });
                var latlng2 = new google.maps.LatLng(25.6903715, -80.3174782);
                var marker2;
                batch.push(marker2 = new google.maps.Marker({ position: latlng2, map: map, icon: '/images/condominium.png', title: "Kings Creek West", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString2 = '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>Kings Creek West<br />7695 SW 86th <br />Miami, FL 33143<br /></p><p>KW Property Management<br /><br />Phone: 3055989447<br /> </p><a href="PropertyView.aspx?id=6542&entitytoadd=20">Add to Property</a> </div></div>';
                var infowindow2 = new google.maps.InfoWindow({ content: contentString2 });
                google.maps.event.addListener(marker2, 'click', function () { infowindow2.open(map, marker2); });
                var latlng3 = new google.maps.LatLng(25.8955829, -80.2951000);
                var marker3;
                batch.push(marker3 = new google.maps.Marker({ position: latlng3, map: map, icon: '/images/condominium.png', title: "Los Palacios by Miami Lakes Condo Assoc.", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString3 = '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>Los Palacios by Miami Lakes Condo Assoc.<br />8001 L W 6TH Avenue<br />Hialeah, FL 33014<br /></p><p>Neighborhood Property<br />Mayra Ruiz <br />Phone: 3058192361<br /> </p><a href="PropertyView.aspx?id=6542&entitytoadd=40">Add to Property</a> </div></div>';
                var infowindow3 = new google.maps.InfoWindow({ content: contentString3 });
                google.maps.event.addListener(marker3, 'click', function () { infowindow3.open(map, marker3); });
                var latlng4 = new google.maps.LatLng(25.6903715, -80.3174782);
                var marker4;
                batch.push(marker4 = new google.maps.Marker({ position: latlng4, map: map, icon: '/images/condominium.png', title: "Kings Creek West Condominiums Association", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString4 = '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>Kings Creek West Condominiums Association<br />7695 SW 86TH <br />Miami, FL 33143<br /></p><p>c/o KW Property Management<br />Frank Diaz <br />fduaz@kwpropertymanagement.com<br /> Phone: 3055989447<br /> </p><a href="PropertyView.aspx?id=6542&entitytoadd=44">Add to Property</a> </div></div>';
                var infowindow4 = new google.maps.InfoWindow({ content: contentString4 });
                google.maps.event.addListener(marker4, 'click', function () { infowindow4.open(map, marker4); });
                var latlng5 = new google.maps.LatLng(25.6856640, -80.3569920);
                var marker5;
                batch.push(marker5 = new google.maps.Marker({ position: latlng5, map: map, icon: '/images/condominium.png', title: "Puerta del Sol Condominiums Association", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString5 = '<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p>Puerta del Sol Condominiums Association<br />9972 SW 88h Street<br />Miami, FL 33176<br /></p><p>Crest Management Group<br />Nancy Messinger <br />Phone: 5619942334<br /> </p><a href="PropertyView.aspx?id=6542&entitytoadd=45">Add to Property</a> </div></div>';
                var infowindow5 = new google.maps.InfoWindow({ content: contentString5 });
                google.maps.event.addListener(marker5, 'click', function () { infowindow5.open(map, marker5); });
                var latlng101 = new google.maps.LatLng(25.9319210, -80.2566680);
                var marker101;
                batch.push(marker101 = new google.maps.Marker({ position: latlng101, map: map, icon: '/images/home.png', title: "092-710510 17310 NW 33 CT", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString101 = '<div id="content" style="margin: 0; padding: 0;"><h1 id="firstHeading" class="firstHeading" style="margin: 0; padding: 0;">Property</h1><div id="bodyContent6545"><br /><img src="/images/ajax-loader.gif" alt="wait" /><br /><br /><br /><br /><br /></div><div id="propertyentityinfo6545"><img src="/images/ajax-loader.gif" alt="wait" /></div></div>';
                var infowindow101 = new google.maps.InfoWindow({ content: contentString101 });
                google.maps.event.addListener(marker101, 'click', function () { infowindow101.open(map, marker101); loadPropertyInfo(6545); loadEntityInfo(6545); });
                var latlng102 = new google.maps.LatLng(25.8342470, -80.2393530);
                var marker102;
                batch.push(marker102 = new google.maps.Marker({ position: latlng102, map: map, icon: '/images/home.png', title: "092-712924 6540 NW 25 AVE", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString102 = '<div id="content" style="margin: 0; padding: 0;"><h1 id="firstHeading" class="firstHeading" style="margin: 0; padding: 0;">Property</h1><div id="bodyContent6546"><br /><img src="/images/ajax-loader.gif" alt="wait" /><br /><br /><br /><br /><br /></div><div id="propertyentityinfo6546"><img src="/images/ajax-loader.gif" alt="wait" /></div></div>';
                var infowindow102 = new google.maps.InfoWindow({ content: contentString102 });
                google.maps.event.addListener(marker102, 'click', function () { infowindow102.open(map, marker102); loadPropertyInfo(6546); loadEntityInfo(6546); });
                var latlng103 = new google.maps.LatLng(25.8736080, -80.3347040);
                var marker103;
                batch.push(marker103 = new google.maps.Marker({ position: latlng103, map: map, icon: '/images/home.png', title: "092-930413 2565 W 56TH ST 202", zIndex: 1, animation: google.maps.Animation.DROP }));
                var contentString103 = '<div id="content" style="margin: 0; padding: 0;"><h1 id="firstHeading" class="firstHeading" style="margin: 0; padding: 0;">Property</h1><div id="bodyContent6560"><br /><img src="/images/ajax-loader.gif" alt="wait" /><br /><br /><br /><br /><br /></div><div id="propertyentityinfo6560"><img src="/images/ajax-loader.gif" alt="wait" /></div></div>';
                var infowindow103 = new google.maps.InfoWindow({ content: contentString103 });
                google.maps.event.addListener(marker103, 'click', function () { infowindow103.open(map, marker103); loadPropertyInfo(6560); loadEntityInfo(6560); });
                // add the array to the map manager
                mgr.addMarkers(batch, 16);
                // dump markers off the map screen
                dropSuperfluousMarkers()
                // refresh
                mgr.refresh();
            }
            // remove markers that aren't currently visible
            function dropSuperfluousMarkers() {
                var alertme;
                // get the map bounds cords
                mapBounds = map.getBounds();
                // loop through the array
                for (var i = 0, ii = batch.length; i < ii; i++) {
                    if (!batch[i]) { continue };
                    if (!mapBounds.contains(batch[i].getPosition())) {
                        // remove from the map
                        batch[i].setMap(null);
                        // remove from the markers array
                        batch.splice(i, 1);
                    }
                }
            }
            // return if image doesn't exist
            function imgLoadErr(obj) {
                obj.alt = "Error Loading Image.\n";
                obj.alt = obj.alt + "Image does not exist in Google Maps.";
            }
            // show streetview
            function streetview(lat, lon) {
                var point1 = new google.maps.LatLng(lat, lon);
                var panoramaOptions = {
                    position: point1,
                    zoom: 0,
                    streetViewControl: true,
                    enableCloseButton: true
                };
                var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
                map.setStreetView(myPano);
                google.maps.event.addListener(myPano, 'closeclick', closeme);
                //GEvent.addListener(myPano, "error", handleNoFlash);
                document.getElementById("outerpano").style.display = "";
                document.getElementById("outerpano").height = "250px";
                document.getElementById("pano").style.display = "";
                document.getElementById("pano").height = "250px";
            }
            // close the streetview
            function closeme() {
                document.getElementById("outerpano").style.display = "none";
            }
        </script> 
4

2 回答 2

0

如果它没有写入 div 但 msg 中的数据存在,那么您的选择器$("#bodyContent" + propertyid)一定是错误的!对此提出警告:

alert($("#bodyContent" + propertyid).html());

或使用 Firebug 等查询它。确保您的选择器是正确的,因为在我看来,它不是

编辑 正确地浏览了您上面的代码。我相信问题出在

infowindow100.open(map, marker100); loadPropertyInfo(6); loadEntityInfo(6);

这是在点击事件上触发的。我认为问题在于,当调用 infowindow.open 时,在渲染之前会有延迟。因此,当您调用loadPropertyInfo(6);它时,它会因为找不到 infor 窗口而失败,因为实际上它不存在。

两种解决方案,

  1. infowindow.open 有回电吗?快速浏览但不确定?
  2. 等一段时间再打电话loadPropertyInfo(6);

试试这个:

infowindow100.open(map, marker100); setTimeout(function() {loadPropertyInfo(6); loadEntityInfo(6);}, 500);

这不漂亮,但如果这解决了你的问题,它证明了我的上述陈述。

于 2012-05-30T15:14:23.593 回答
0

一些事情,

  1. 检查文档准备好后是否调用该函数?
  2. ajax调用设置IF条件,propertyid不为null时才进行ajax调用
  3. 确保msg.d正确
  4. 试试这行代码:
    $('#bodyContent'+propertyid).empty().html(msg.d);
于 2012-05-30T15:18:36.130 回答