JQuery dialog using typescript/knockout not opening

Question

I'm using knockout and typescript to open a dialog based on a conditional. The if statement works, but the dialog doesn't get toggled using the code below. Any help would be greatly appreciated.

TypeScript:

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 function that is supposed to open the dialog :

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

<div id="mtrWarnDialog" data-bind="dialog: { autoOpen: false, modal: true}">

</div>

In your HTML what does your custom binding do? data-bind="dialog: {autoOpen:false, model:true}". It looks like you're manually calling .dialog() in your initialize anyways so I'm not sure why you'd need both. — Jason Spake
– Jason Spake, Commented Jan 18, 2017 at 19:57

Stanislas · Accepted Answer · 2018-02-09 22:12:00Z

The listed code is very unclear, as the code that should open the jQuery dialog, seems to be triggered by the confirm-button inside the dialog. Aside from that, you also seem to have a dialog-BindingHandler in your HTML code, which isn't listed here.

The approach I've used in the past, goes as follows.

Add a property onto your components ViewModel, which indicates if the dialog should be shown or not

public showModal: KnockoutObservable<boolean> = ko.observable(false);

Add a BindingHandler for the jQuery Modal-dialog. There are plenty of examples of this on stackoverflow. Make sure to register the BindingHandler, or it will have no effect.

ko.bindingHandlers.modal = ...

In your template, hand the public property from your ViewModel to the BindingHandler, something like:

<div data-bind="dialog: { dialogVisible: showModal }"></div>

Finally, set the property on the ViewModel to true/false and the modal should open/close.

this.showModal(true);

Collectives™ on Stack Overflow

JQuery dialog using typescript/knockout not opening

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related