Ok, I have what may be seem like a very dumb question to many of you, but I'm stumped. I'm working on a somewhat dated dojo project. Part of it has been converted to AMD and part hasn't. This part hasn't, so please bear with me.
I have a page that loads with a dgrid and has the shell of a dijit.Dialog built but hidden in html markup. There is a edit button on the page that when pressed, builds and populates the dialog and it's associated dijits (Selects, multiselects, etc. via old dojox.data.XmlStores and uses the data from the selected grid row to select the correct data in each dijit. As the dijits are built, onChange events are added. when the data is set in these dijits, the onChange events fire. This is needed. Sometimes one dijit's value needs to change another dijit's value...even on the first load. However, I have a couple extra javascript funtions that are tied to onChange events and set values of fields based on other values on the page. These DO NOT need to run on the first full load of the dialog and all its fields.
Here's what I think are the relevant pieces of my code: The HTML markup:
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" style="width:800px;text-align:left;" id="editDialog">
<table width='800px' cellpadding='25px' cellspacing='10px'>
<tr>
<td align="right"><From: </td>
<td align="left">
<div id="fromSelector"></div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">Unit: </td>
<td align="left">
<div id="fromUnitSelector"></div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">Room: </td>
<td align="left">
<div id="fromRoomSelector"></div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">Mode: </td>
<td align="left" id="mode">
<div id="modeSelector"></div>
</td>
<td align="right">Priority:</td>
<td align="left" id="priority">
<div id="prioritySelector"></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">Transporters: </td>
<td align="left" id="numSel">
<div id="numTranSelector"></div>
</td>
</tr>
<tr>
<td align="right">Type: </td>
<td align="left" id="type">
<div id="typeSelector"></div>
</td>
<td align="right">Comments:</td>
<td align="left" id="comment">
<div id="comments"></div>
</td>
</tr>
</table>
</div>
</div>
Javascript:
function edit_button_pressed() {
//Javascript that creates the boxes
//begin From Location
dojo.byId("fromSelector").innerHTML = "";
var fromSelector = dojo.byId("fromSelector");
var locStore = new dojox.data.XmlStore({
url: 'getlocations.url',
label: 'label',
keyAttribute:'id'
});
function sizeLocs(size, request){
var requests = size;
if (requests > 0) {
//from
var fromSelect = new dijit.form.Select({
name: "fromSelect",
id: "fromSelect",
store: locStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(fromSelector);
fromSelect.startup();
fromSelect.addOption({label: '--Select a Loc--', value: ' '});
if (transFromLoc.length > 0) {
fromSelect.set('value', transFromLoc);
} else {
fromSelect.set('value', ' ');
}
if (disableBecauseStarted) {
fromSelect.set('disabled', 'disabled');
}
fromSelect.on("change", function(){
if ((String(fromSelect.value) != String(defaultOrigination)) || disableBecauseStarted) {
dijit.byId('fromUnitSelect').set('disabled', 'disabled');
dijit.byId('fromRoomSelect').set('disabled', 'disabled');
} else {
dijit.byId('fromUnitSelect').set('disabled', false);
dijit.byId('fromRoomSelect').set('disabled', false);
}
setAutoPriority();
})
}
}
//end from location
//Units Select
var unitStore = new dojox.data.XmlStore({
url: 'getUnits.url',
label: 'label',
keyAttribute:'id'
});
//from
var fromUnitSelect = new dijit.form.Select({
name: "fromUnitSelect",
id: "fromUnitSelect",
store: unitStore,
style: "width: 150px;",
labelAttr: "label"
}).placeAt(dojo.byId('fromUnitSelector'));
fromUnitSelect.startup();
fromUnitSelect.set('disabled', 'disabled');
fromUnitSelect.addOption({label: '--Unit--', value: ' '});
if (transFromUnit.length > 0) {
fromUnitSelect.set('value', transFromUnit);
} else {
fromUnitSelect.set('value', ' ');
}
fromUnitSelect.on("change", function(){
dijit.byId('fromRoomSelect').destroy();
var fromRoomStore = new dojox.data.XmlStore({
url: 'getRooms.url?UNIT=' + this.value,
label: 'label',
keyAttribute:'id'
});
var fromRoomSelect = new dijit.form.Select({
name: "fromRoomSelect",
id: "fromRoomSelect",
store: fromRoomStore,
style: "width: 150px;",
labelAttr: "label"
}).placeAt(dojo.byId('fromRoomSelector'));
fromRoomSelect.startup();
fromRoomSelect.addOption({label: '--Select a Room--', value: ' '});
if (transFromRoom.length > 0) {
fromRoomSelect.set('value', transFromRoom);
} else {
fromRoomSelect.set('value', ' ');
}
if (String(dijit.byId('fromSelect').value) != String(defaultOrigination)) {
dijit.byId('fromUnitSelect').set('disabled', 'disabled');
dijit.byId('fromRoomSelect').set('disabled', 'disabled');
} else {
dijit.byId('fromUnitSelect').set('disabled', false);
dijit.byId('fromRoomSelect').set('disabled', false);
}
if (dijit.byId('patientSelect') != null
&& String(dijit.byId('patientSelect').value).length > 1 ) {
var patientDataStore = new dojox.data.XmlStore({
url: 'getPatient.url?MRN=' + String(dijit.byId('patientSelect').value),
rootItem: "patient"
});
var getPat = function(items, request){
for(var i = 0; i < items.length; i++){
var item = items[i];
var assignedRoom = String(patientDataStore.getValue(item, "assignedRoom"));
var reservationRoom = String(patientDataStore.getValue(item, "roomReservationRoom"));
}
if (reservationRoom.length > 0 ) {
setAssToRoom(reservationRoom);
setAssRoom(assignedRoom);
} else {
setAssToRoom(assignedRoom);
setAssRoom(assignedRoom);
}
}
var request = patientDataStore.fetch({query:{}, onComplete: getPat});
}
setAutoPriority();
})
//Begin Modes
dojo.byId("createModeSelector").innerHTML = "";
var createModeSelector = dojo.byId("createModeSelector");
var transModeStore = new dojox.data.XmlStore({
url: '/workassign/getTransModes.wa',
label: 'label',
keyAttribute:'id'
});
function transSizeMode(size, request){
var requests = size;
var modeSelect = "";
if (requests > 0) {
createModeSelect = new dijit.form.Select({
name: "createModeSelect",
id: "createModeSelect",
store: transModeStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(createModeSelector);
createModeSelect.startup();
createModeSelect.addOption({label: '--Select a Mode--', value: ' '});
}
}
transModeStore.fetch({query: {}, onBegin: transSizeMode, start: 0, count: 0});
//End Modes
//Begin Types
dojo.byId("typeSelector").innerHTML = "";
var typeSelector = dojo.byId("typeSelector");
var transTypeStore = new dojox.data.XmlStore({
url: 'getType.url',
label: 'label',
keyAttribute:'id'
});
var typeSel = new dijit.form.MultiSelect({
name: 'typeSelect',
id: 'typeSelect',
style: 'width: 200px; font-size: 18px;'
}).placeAt(typeSelector);
var fillTypes = function(items, request){
dojo.forEach(items, function(item) {
var c = dojo.doc.createElement('option');
c.innerHTML = transTypeStore.getValue(item, "label");
c.value = transTypeStore.getValue(item, "id");
typeSelect.appendChild(c);
})
if (transType.length > 0) {
var transArray = transType.split(",");
typeSel.set('value', transArray);
} else {
typeSel.set("value", " ");
}
}
typeSel.on("change", function(){
setAutoPriority();
setAutoTransporters();
})
typeSel.startup();
//End Types
dojo.byId("prioritySelector").innerHTML = "";
var prioritySelector = dojo.byId("prioritySelector");
var priorityModeStore = new dojox.data.XmlStore({
url: 'getPriorities.url',
label: 'label',
keyAttribute:'id'
});
function prioritySizeMode(size, request){
var requests = size;
var modeSelect = "";
if (requests > 0) {
prioritySelect = new dijit.form.Select({
name: "prioritySelect",
id: "prioritySelect",
store: priorityModeStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(prioritySelector);
prioritySelect.startup();
prioritySelect.addOption({label: '--Select a Priority--', value: ' '});
}
if (priorityType.length > 0) {
prioritySelect.set('value', priorityType);
} else {
prioritySelect.set('value', ' ');
}
if(userLevel=="TransScheduler") {
//Check priority override property
dojo.request.xhr("/workassign/getPriorityOverrideStatus.wa", {
handleAs: "text"
}).then(function(data){
if (data.indexOf("false") > -1) {
dijit.byId('prioritySelect').set('disabled',true);
}
}, function(err){
// Handle the error condition
alert("error: " + err);
}, function(evt){
// Handle a progress event from the request if the
// browser supports XHR2
});
}
}
//Fetches and populate data
transModeStore.fetch({query: {}, onBegin: transSizeMode, start: 0, count: 0});
transTypeStore.fetch({query: {}, onComplete: fillTypes});
priorityModeStore.fetch({query: {}, onBegin: prioritySizeMode, start: 0, count: 0});
locStore.fetch({query: {}, onBegin: sizeLocs, start: 0, count: 0});
//show the dialog
dijit.byId("editDialog").show();
} //end edit_button_pressed
function setAutoPriority() {
var params = "";
if (dijit.byId("fromUnitSelect")) {
params = params + "&FROMUNIT=" + dijit.byId("fromUnitSelect").get("value");
}
if (dijit.byId("toUnitSelect")) {
params = params + "&TOUNIT=" + dijit.byId("toUnitSelect").get("value");
}
if (dijit.byId("fromSelect")) {
params = params + "&FROMLOCATION=" + dijit.byId("fromSelect").get("value");
}
if (dijit.byId("toSelect")) {
params = params + "&TOLOCATION=" + dijit.byId("toSelect").get("value");
}
if (dijit.byId("typeSelect")) {
params = params + "&TYPE=" + dijit.byId("typeSelect").get("value");
}
dojo.request.xhr("getHighestPriority.URL?NUM=0" + params, {
handleAs: "text"
}).then(function(data){
if (dijit.byId("prioritySelect")) {
dijit.byId("prioritySelect").set('value', data);
}
}, function(err){
// Handle the error condition
alert("error: " + err);
}, function(evt){
// Handle a progress event from the request if the
// browser supports XHR2
});
}
function setAutoTransporters() {
var params = "";
if (dijit.byId("typeSelect")) {
params = params + "TYPES=" + dijit.byId("typeSelect").get("value");
}
dojo.request.xhr("getHighestNum.url?" + params, {
handleAs: "text"
}).then(function(data){
if (dijit.byId("numTransSelect")) {
dijit.byId("numTransSelect").set('value', data);
}
}, function(err){
// Handle the error condition
alert("error: " + err);
}, function(evt){
// Handle a progress event from the request if the
// browser supports XHR2
});
}
As you can see I have fetches that call the XmlStores and select what should be selected in the individual dijits when applicable. The problem functions for me are the setAutoPriority() and setAutoTransporters(). I could easily pass a variable to those functions to tell it whether or not it was the first load...or even wrap their call in an if statement. I just can't figure out how to tell that everything (populating the dijits with data and set their value) has happened.
Any ideas would be appreciated. Nothing I've come up with has worked so far. And just FYI, depending on the data from the grid row selected, not every one of those dijits will change/have data selected every time...which muddies the water even more.
So, this is just a draft idea:
But the general idea is there. Core part of the idea are the first 4 lines of code.
var fetchDone = 0;
function isReady() {
return fetchDone >= 4; //the amount of fetch you have bellow
}
function edit_button_pressed() {
//Javascript that creates the boxes
//begin From Location
//reset the counter
fetchDone = 0;
dojo.byId("fromSelector").innerHTML = "";
var fromSelector = dojo.byId("fromSelector");
var locStore = new dojox.data.XmlStore({
url: 'getlocations.url',
label: 'label',
keyAttribute: 'id'
});
function sizeLocs(size, request) {
var requests = size;
if (requests > 0) {
//from
var fromSelect = new dijit.form.Select({
name: "fromSelect",
id: "fromSelect",
store: locStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(fromSelector);
fromSelect.startup();
fromSelect.addOption({
label: '--Select a Loc--',
value: ' '
});
if (transFromLoc.length > 0) {
fromSelect.set('value', transFromLoc);
} else {
fromSelect.set('value', ' ');
}
if (disableBecauseStarted) {
fromSelect.set('disabled', 'disabled');
}
fromSelect.on("change", function() {
if ((String(fromSelect.value) != String(defaultOrigination)) || disableBecauseStarted) {
dijit.byId('fromUnitSelect').set('disabled', 'disabled');
dijit.byId('fromRoomSelect').set('disabled', 'disabled');
} else {
dijit.byId('fromUnitSelect').set('disabled', false);
dijit.byId('fromRoomSelect').set('disabled', false);
}
setAutoPriority();
})
}
}
//end from location
//Units Select
var unitStore = new dojox.data.XmlStore({
url: 'getUnits.url',
label: 'label',
keyAttribute: 'id'
});
//from
var fromUnitSelect = new dijit.form.Select({
name: "fromUnitSelect",
id: "fromUnitSelect",
store: unitStore,
style: "width: 150px;",
labelAttr: "label"
}).placeAt(dojo.byId('fromUnitSelector'));
fromUnitSelect.startup();
fromUnitSelect.set('disabled', 'disabled');
fromUnitSelect.addOption({
label: '--Unit--',
value: ' '
});
if (transFromUnit.length > 0) {
fromUnitSelect.set('value', transFromUnit);
} else {
fromUnitSelect.set('value', ' ');
}
fromUnitSelect.on("change", function() {
dijit.byId('fromRoomSelect').destroy();
var fromRoomStore = new dojox.data.XmlStore({
url: 'getRooms.url?UNIT=' + this.value,
label: 'label',
keyAttribute: 'id'
});
var fromRoomSelect = new dijit.form.Select({
name: "fromRoomSelect",
id: "fromRoomSelect",
store: fromRoomStore,
style: "width: 150px;",
labelAttr: "label"
}).placeAt(dojo.byId('fromRoomSelector'));
fromRoomSelect.startup();
fromRoomSelect.addOption({
label: '--Select a Room--',
value: ' '
});
if (transFromRoom.length > 0) {
fromRoomSelect.set('value', transFromRoom);
} else {
fromRoomSelect.set('value', ' ');
}
if (String(dijit.byId('fromSelect').value) != String(defaultOrigination)) {
dijit.byId('fromUnitSelect').set('disabled', 'disabled');
dijit.byId('fromRoomSelect').set('disabled', 'disabled');
} else {
dijit.byId('fromUnitSelect').set('disabled', false);
dijit.byId('fromRoomSelect').set('disabled', false);
}
if (dijit.byId('patientSelect') != null && String(dijit.byId('patientSelect').value).length > 1) {
var patientDataStore = new dojox.data.XmlStore({
url: 'getPatient.url?MRN=' + String(dijit.byId('patientSelect').value),
rootItem: "patient"
});
var getPat = function(items, request) {
for (var i = 0; i < items.length; i++) {
var item = items[i];
var assignedRoom = String(patientDataStore.getValue(item, "assignedRoom"));
var reservationRoom = String(patientDataStore.getValue(item, "roomReservationRoom"));
}
if (reservationRoom.length > 0) {
setAssToRoom(reservationRoom);
setAssRoom(assignedRoom);
} else {
setAssToRoom(assignedRoom);
setAssRoom(assignedRoom);
}
}
var request = patientDataStore.fetch({
query: {},
onComplete: getPat
});
}
setAutoPriority();
})
//Begin Modes
dojo.byId("createModeSelector").innerHTML = "";
var createModeSelector = dojo.byId("createModeSelector");
var transModeStore = new dojox.data.XmlStore({
url: '/workassign/getTransModes.wa',
label: 'label',
keyAttribute: 'id'
});
function transSizeMode(size, request) {
var requests = size;
var modeSelect = "";
if (requests > 0) {
createModeSelect = new dijit.form.Select({
name: "createModeSelect",
id: "createModeSelect",
store: transModeStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(createModeSelector);
createModeSelect.startup();
createModeSelect.addOption({
label: '--Select a Mode--',
value: ' '
});
}
}
transModeStore.fetch({
query: {},
onBegin: transSizeMode,
start: 0,
count: 0
});
//End Modes
//Begin Types
dojo.byId("typeSelector").innerHTML = "";
var typeSelector = dojo.byId("typeSelector");
var transTypeStore = new dojox.data.XmlStore({
url: 'getType.url',
label: 'label',
keyAttribute: 'id'
});
var typeSel = new dijit.form.MultiSelect({
name: 'typeSelect',
id: 'typeSelect',
style: 'width: 200px; font-size: 18px;'
}).placeAt(typeSelector);
var fillTypes = function(items, request) {
dojo.forEach(items, function(item) {
var c = dojo.doc.createElement('option');
c.innerHTML = transTypeStore.getValue(item, "label");
c.value = transTypeStore.getValue(item, "id");
typeSelect.appendChild(c);
})
if (transType.length > 0) {
var transArray = transType.split(",");
typeSel.set('value', transArray);
} else {
typeSel.set("value", " ");
}
}
typeSel.on("change", function() {
setAutoPriority();
setAutoTransporters();
})
typeSel.startup();
//End Types
dojo.byId("prioritySelector").innerHTML = "";
var prioritySelector = dojo.byId("prioritySelector");
var priorityModeStore = new dojox.data.XmlStore({
url: 'getPriorities.url',
label: 'label',
keyAttribute: 'id'
});
function prioritySizeMode(size, request) {
var requests = size;
var modeSelect = "";
if (requests > 0) {
prioritySelect = new dijit.form.Select({
name: "prioritySelect",
id: "prioritySelect",
store: priorityModeStore,
style: "width: 200px;",
labelAttr: "label"
}).placeAt(prioritySelector);
prioritySelect.startup();
prioritySelect.addOption({
label: '--Select a Priority--',
value: ' '
});
}
if (priorityType.length > 0) {
prioritySelect.set('value', priorityType);
} else {
prioritySelect.set('value', ' ');
}
if (userLevel == "TransScheduler") {
//Check priority override property
dojo.request.xhr("/workassign/getPriorityOverrideStatus.wa", {
handleAs: "text"
}).then(function(data) {
if (data.indexOf("false") > -1) {
dijit.byId('prioritySelect').set('disabled', true);
}
}, function(err) {
// Handle the error condition
alert("error: " + err);
}, function(evt) {
// Handle a progress event from the request if the
// browser supports XHR2
});
}
}
var onFetchComplete = function() {
fetchDone++;
};
//Fetches and populate data
transModeStore.fetch({
query: {},
onBegin: transSizeMode,
onComplete: onFetchComplete,
start: 0,
count: 0
});
transTypeStore.fetch({
query: {},
onComplete: function() {
onFetchComplete();
fillTypes.apply(this, arguments);
}
});
priorityModeStore.fetch({
query: {},
onBegin: prioritySizeMode,
onComplete: onFetchComplete,
start: 0,
count: 0
});
locStore.fetch({
query: {},
onBegin: sizeLocs,
onComplete: onFetchComplete,
start: 0,
count: 0
});
//show the dialog
dijit.byId("editDialog").show();
} //end edit_button_pressed
function setAutoPriority() {
if (!isReady()) {
return;
}
var params = "";
if (dijit.byId("fromUnitSelect")) {
params = params + "&FROMUNIT=" + dijit.byId("fromUnitSelect").get("value");
}
if (dijit.byId("toUnitSelect")) {
params = params + "&TOUNIT=" + dijit.byId("toUnitSelect").get("value");
}
if (dijit.byId("fromSelect")) {
params = params + "&FROMLOCATION=" + dijit.byId("fromSelect").get("value");
}
if (dijit.byId("toSelect")) {
params = params + "&TOLOCATION=" + dijit.byId("toSelect").get("value");
}
if (dijit.byId("typeSelect")) {
params = params + "&TYPE=" + dijit.byId("typeSelect").get("value");
}
dojo.request.xhr("getHighestPriority.URL?NUM=0" + params, {
handleAs: "text"
}).then(function(data) {
if (dijit.byId("prioritySelect")) {
dijit.byId("prioritySelect").set('value', data);
}
}, function(err) {
// Handle the error condition
alert("error: " + err);
}, function(evt) {
// Handle a progress event from the request if the
// browser supports XHR2
});
}
function setAutoTransporters() {
if (!isReady()) {
return;
}
var params = "";
if (dijit.byId("typeSelect")) {
params = params + "TYPES=" + dijit.byId("typeSelect").get("value");
}
dojo.request.xhr("getHighestNum.url?" + params, {
handleAs: "text"
}).then(function(data) {
if (dijit.byId("numTransSelect")) {
dijit.byId("numTransSelect").set('value', data);
}
}, function(err) {
// Handle the error condition
alert("error: " + err);
}, function(evt) {
// Handle a progress event from the request if the
// browser supports XHR2
});
}