I'm currently working with knockout and typescript to trigger a dialog based on a certain condition. Although the if statement is functioning properly, I am facing an issue where the dialog does not toggle as expected using the code provided below. Any assistance on this matter would be highly valued.
Here is the TypeScript code snippet:
class SearchMTRModel {
mtrWarnElement: JQuery;
allowDuplicates : KnockoutObservable<boolean>;
}
Initialize function :
var model = new SearchMTRModel(); $(() => { ko.applyBindings(model); search(); model.mtrWarnElement = $('#mtrWarnDialog').dialog({ autoOpen: false, modal: true, title: 'Duplicate MTR detected.', buttons: { 'Cancel': () => { model.allowDuplicates = ko.observable(false); model.mtrWarnElement.dialog('close'); }, 'Confirm': () => { var heats = new MTRHeat(); model.allowDuplicates = ko.observable(true); addPDFToPackage(heats); model.mtrWarnElement.dialog('close'); } }, close: () => { model.allowDuplicates(false); model.allowDuplicates = ko.observable(false); model.mtrWarnElement.dialog('close'); } }); });
The section of code responsible for opening the dialog box:
export function addPDFToPackage(heat: MTRHeat): void {
var koHeat: MTRHeatWithInclude = ko.mapping.fromJS(heat);
koHeat.Include = ko.observable(true);
var mtrID = koHeat.MTR.MTRID();
var mtrIDs = [];
var addToHeats = () => model.mtrPackage.Heats.push(koHeat);
var arrayOfHeats = model.mtrPackage.Heats();
for (var i = 0; i < arrayOfHeats.length; i++) {
mtrIDs.push(arrayOfHeats[i].MTRID());
}
var idx = mtrIDs.indexOf(mtrID);
if (idx >= 0) {
//the code gets here but dialog doesn't open.
model.mtrWarnElement.dialog('open');
}
else if (idx === -1 || model.allowDuplicates()) {
addHeatToPackage(model.mtrPackage.PackageID(), heat.HeatID).done(addToHeats);
}
}
}
HTML Code:
<div id="mtrWarnDialog" data-bind="dialog: { autoOpen: false, modal: true}">
</div>