[jQuery] Trouble updating divs with Ajax
I just can't get my head around this one. This Javascript function
gets called everytime user submits a query through a form. It loads a
Google Map, and also tries to update a div with results from Ajax
query. All this is done in the callback-function.
The GMap part works well, it loads some markers on the map, but the
div is updated with the same text everytime, regardless of the Ajax
query response. What am I doing wrong here?
function loadMap(query) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("GM"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(0, 0);
map.setCenter(center, 1);
// Get search results from vtAPI
$.getJSON("api.php",
{ q: query },
function (json) {
// 100 is an error code
if (json != "100") {
// Create markers for the map
markers = json.geonames;
for (var i = 0; i < json.totalResultsCount; i++) {
// add some Google Map markers here
}
// Update div
placeHtml = "";
placeHtml = placeHtml + "<ul class=\"placemenu\">";
for (var i = 0; i < json.totalResultsCount; i++) {
var name = markers[i].name;
var country = markers[i].countryName;
var type = markers[i].fclName;
var lat = markers[i].lat;
var lng = markers[i].lng;
placeHtml = placeHtml + "<li><a href=\"{$install_dir}?
m=text&p=" + name + "&c=" + country + "\">"
+ name + ", " + country + "</a> (" + type + ")</li><br />";
}
placeHtml = placeHtml + "<ul>";
// Insert into DOM
//$("#placeField").html(placeHtml);
} else {
alert ("Could not get any locations.");
}
}
);
}
}