SAPUI5 - Content is not displayed - sapui5

Question

experts,
I've just started to study sapui5, and right now the thing that bothers me is that I can't get a dropdown menu to be shown, while a button I create together with the drop down menu is displayed.
Here is my view:
createContent : function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id : this.createId("MyButton"),
text : "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
$.ajax({
url : "GetEmployees",
type : "post",
success : function(response) {
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee"+index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: "+oItem);
});
alert(oEmployeeSelection);
// Attach the DropdownBox to the page
aControls.push(oEmployeeSelection);
}, // end success call handler
error: function(){
alert("error while building employee select menu");
}
});// end Employee selection
return aControls;
}// end createContent
I do get data from the server, alerts inside the success function shoot, but I see only the button on screen.
What an I doing wrong?
Thanks.

Answer 1

The root cause is that you add the Dropdown box in the service callback method and the aControls is already returned with only oButton inserted before the service callback.
Adjust the code as following will do:
createContent: function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id: this.createId("MyButton"),
text: "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
//Add dropdown box before your service call
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
aControls.push(oEmployeeSelection);
$.ajax({
url: "GetEmployees",
type: "post",
success: function(response) {
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee" + index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: " + oItem);
});
alert(oEmployeeSelection);
}, // end success call handler
error: function() {
alert("error while building employee select menu");
}
}); // end Employee selection
return aControls;
} // end createContent