javascript - Two $.getJSON calls for one Google Maps api info window. Scope issue -
i trying call $.getjson twice , use data both in 1 info window. mashup display articles google news "fortune" (from rss feed) in google maps api infowindow. put click event listener , info window blocks inside $.getjson("articles.php") call code below works in far display articles can't figure out right structure display fortune since it's in separate $.getjson it's own scope. there way make work?
function addmarker(place) { var image = 'http://maps.google.com/mapfiles/kml/pal2/icon31.png'; var mylatlng = new google.maps.latlng(parsefloat(place.latitude), parsefloat(place.longitude)); //make markers , push array. var marker = new markerwithlabel({ position: mylatlng, map: map, icon: image, labelclass: "labels", labelcontent: place.place_name, labelanchor: new google.maps.point(20,0), }); markers.push(marker); // getjson fortune rss feed. var fortune = []; $.getjson("fortunes.php").done(function(data, textstatus, jqxhr) { var content = data; var len = data.length; if (content.length < 1) { var fortune = "test"; } else { fortune = content; } }); // getjson articles google news rss feed. var query = place.postal_code; var articles = "news service unavailable."; var parameter = { "geo": query }; $.getjson("articles.php", parameter).done(function(data, textstatus, jqxhr) { var content = data; var len = data.length; if (content.length < 1) { articles = "slow news day." } else { articles = "<ul>"; // put articles in unordered list (var = 0; < len; i++) { articles += "<div><li> <a href=\"" + data[i].link + "\" target=\"_blank\">" + data[i].title + "</li></div>"; } articles += "</ul><div><p>fortune</p><p>" + fortune.length + "</p></div>"; } // listener info window google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); // info window var infowindow = new google.maps.infowindow({ content: articles }); }); }
there 4 ways done.
- make ajax calls sequentially - see code example below or http://jsfiddle.net/xs0oypmd/
- build marker window content when user opens it, move articles html building code within marker click event listener , use
setcontent
function oninfowindow
. if going approach i'd suggest using flag indicate first time info window opened articles html built once. approach have limitation still not know if fortunes has loaded. - make "fortunes" call within "articles.php" - assumes ownership on php scripts. approach means 1 ajax call browser.
- use model binding framework, e.g. knockout, update infowindow content when data updated via json call
code example option 1
$("#btngetarticles").on("click", function(){ var fortunes = "test"; $.ajax({ url: "/echo/json/", type: 'post', datatype: 'json', data: { json: '"some fortune"' } }).done(function(data) { fortunes = data; $.ajax({ url: "/echo/json/", type: 'post', datatype: 'json', data: { json: '[{"link": "link/to/first/article", "title" : "first article"},{"link": "link/to/second/article", "title" : "second article"},{"link": "link/to/third/article", "title" : "third article"}]' } }).done(function(articles) { var articleslist = $("<ul />"); $.each(articles, function(i, v) { articleslist.append($("<li />").html(v.title + ' ' + fortunes.length)); }); $("#output").append(articleslist); }); }); });
Comments
Post a Comment