Select2 Preloading Multiple Selection from AJAX loop - ajax

Question

I'm integrating a Google Map API that uses Geonames and Select2 to allow the user to enter the cities that he/she has visited.
Currently, I am trying to find a way for the search area to show the selections the user made in a previous session upon reloading the page (e.g., if the user already entered Paris, France in a previous session, then Paris, France should be preloaded in the search area upon reloading). The selections are stored in a database, but at the moment I'm only able to put one of the previously selected cities in the search area by repassing it through Geonames (I need to pass through Geonames to pass the lat & long). I'd like to repass as many locations as the user entered in the previous session.
The code I am using for this is below - thanks for your help:
function locationFormatResult(location) {
return location.name + ", " + location.adminName1 + ", " + location.countryName;
}//results format
function locationFormatSelection(location) {
return location.name + ", " + location.adminName1 + ", " + location.countryName;
}//selection format
$(function () {
$('#citiestext').select2({
id: function(e) { return e.name + ',' + e.adminName1 + ',' + e.countryName + ',' + e.lat + ',' + e.lng},
placeholder: 'Location',
multiple: true,
allowClear: true,
width: '350px',
height: '50px',
overflow: 'auto',
minimumInputLength: 2,
ajax: { //this is the ajax call for when the user selects a city
url: 'http://ws.geonames.org/searchJSON',
dataType: 'jsonp',
data: function (term) {
return {
featureClass: "P",
style: "medium",
isNameRequired: "true",
q: term
};
},
results: function (data) {
return {
results: data.geonames
};
}
},
initSelection : function(element, callback){
for (var i=11;i<13;i++){
$.ajax("http://ws.geonames.org/searchJSON",{//ajax for preloading
dataType: 'jsonp',
data:{
maxRows:1,
q: i}//for this example, I'm using the numbers 11 & 12 as my Geonames queries just to test the preloading functionality (both numbers do have corresponding locations in Geonames if run through a query)
}).done(function(data){callback(data.geonames);}); //PROBLEM: currently is only returning the location for "12" - I need it to return locations for 11 and 12 in the select area
}},
formatResult: locationFormatResult,
formatSelection: locationFormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
});
jsfiddle: http://jsfiddle.net/YDJee/ (trying to get more than one entry in the select box)

Answer 1

The point is that the callback needs to be called with the array of objects for multiple select2.
In this case, as you need to gather each json object from an ajax call, you need to use jQuery deferreds.
Something like that:
initSelection : function(element, callback){
var result = new Array();
var f = function(i) {
return $.ajax("http://ws.geonames.org/searchJSON",{
dataType: 'jsonp',
data:{
maxRows:1,
q: i
},
success: function(data) { result.push(data);}})
};
var def = [];
for (var i=11;i<13;i++){
def.push(f(i))
}};
$.when.apply($, def).done(function() {
callback(result);
});
}

Answer 2

For those also using an id callback, and who find their issue is not an async problem, take a look at this (which remains a necessary fix as of this posting).