Dynamic html elements to callback in require cache - dojo

Question

I want to change/use/pass html element as dynamic based on user. How do I achieve.
I have used ajax request for getting and setting values to global variable before require cache. But its won't work because ajax take little time and require runs instantly.
var ajaxReturn = "";
$.ajax({
url: "http://localhost:8080/domain/_search?q=DomainId:15&from=0&size=100",
type: 'GET',
success: function (result) {
ajaxReturn = '<div data-dojo-attach-point="dropDownNode"></div>';
},
error: function () {
console.log("Error....");
}
});
require({
cache: {
"url:local/store/dropDown.html": ajaxReturn
}
});
define("local/store/dropDown", "a, b, c, d, e, f".split(" "), function(a, b, c, d, e, f) {
a = a(d, {templateString: e});
return a
});
I want to pass dynamic html elements to ajaxReturn in inside the require cache.

Answer 1

For best user experience I you should rethink your code, first require anything, then make ajax calls.
But, one way to 'fix' this is to add async: false in your Ajax call. That makes the call synchronous so you public var will have a value.
Example:
$.ajax({
url: "http://localhost:8080/domain/_search?q=DomainId:15&from=0&size=100",
async:false,
type: 'GET',
success: function (result) {
ajaxReturn = '<div data-dojo-attach-point="dropDownNode"></div>';
},
error: function () {
console.log("Error....");
}
});