I’m having issues with an ajax call to an asmx page that returns a value added to a div.
The issue is that even though I always get data back from the asmx page. The value does not get written to the div.
It’s frustrating because I know it’s working. But the data does not get written to the div.
And probably adding some complexity to the issue is that I’m using google maps api.
I would post the code but it’s pretty big and I doubt it would fit.
but here is my ajax call.
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
});
}
here is the issue. the .html part does not always write to the div.
$("#bodyContent" + propertyid).html(msg.d);
But if I uncomment the alert there is always data when the alert pops up.
however the div isn’t written to.
Anyone else run into this issue?
can I do a try catch to see if the info is written to the div? and if not rerun the ajax call?
here is the code it’s long.
<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>
If it’s not writing to the div but the data in msg exists then your selector
$("#bodyContent" + propertyid)must be wrong! put an alert on that:Or query it using Firebug, etc. Make sure your selector is correct because it seems to me, it isn’t
EDIT
right been trawling through your code above. I believe the issue is in the line
this is fired on the on click event. I think the issue is that when infowindow.open is called there’s a delay before it’s rendered. So then when you call
loadPropertyInfo(6);it fails because it can’t find the infor window, because effectively it doesn’t exist.Two solutions,
loadPropertyInfo(6);try this:
It’s not pretty, but if this solves your problem it proves my above statement.