I'm currently implementing a small application driven by a YUI DataTable. For this DataTable I need two configuration arrays, which I both get from server with an XHR. However, my current implementation makes me wonder how these things are done properly.
What I have now is two asynchronous AJAX requests which both set their respective data variables onSuccess and then call the same callback, which in turn checks whether both variables are set and if they are, initializes dependant objects.
DataTable.prototype.show = function () {
if (!this.myDataTable) {
var self = this;
new Ajax.Request(this.dataProxy, {
method: 'get',
parameters: {
format: 'json',
action: 'columns'
},
onSuccess: function(transport) {
self.dataTableColumns = transport.responseText.evalJSON();
self.dataTableCallback();
}
});
new Ajax.Request(this.dataProxy, {
method: 'get',
parameters: {
format: 'json',
action: 'configuration'
},
onSuccess: function (transport) {
self.dataTableConfiguration = transport.responseText.evalJSON();
self.dataTableCallback();
}
});
}
};
DataTable.prototype.dataTableCallback = function () {
if (!this.dataTableConfiguration || !this.dataTableColumns) {
console.log("data table not full yet");
return;
}
// DataTable initialization goes here...
};
NB: Code is a mixture of Prototype any YUI, this is because we are mainly using Prototype and I'm the one experimenting with YUI, so not everything is YUI-only yet.
I consider this way of doing things a bit stupid, non-scalable and it's also producing race conditions (imaging several dozens of data proxies). There are certainly other ways of getting dynamic data which are fast, reliable and easy-to-read, can you list some of those?