CODEWITHSUNDEEP
jqueryknockout.js
twaldron
twaldron

Reputation: 2752

Knockout Click Bindings in Jquery Dialog

I am using a knockout.js view model on a page and everything works properly except for the click bindings that are in a div which I have set to a jquery dialog

here is the div

<div id="CancelModal" title="Cancel">
    Changes to the definition have been detected. Do you want to exit and discard    the changes?"   
    <div style="position: absolute; bottom: 8px; right: 8px; text-align: right">
        <input type="button" value="Yes" data-bind="click: cancelConfirm" />
        <input type="button" value="No" data-bind="click: cancelDeny" />
    </div>
</div>

then my jquery

$("#CancelModal").dialog({
    modal: true,
    autoOpen: false,
    width: 400,
    minHeight: 150,
    maxHeight: 150,
    position: "center",
    resizable: false
});

then in the viewmodel I have 

...

cancelConfirm() {
    alert("confirm");
}

cancelDeny() {
    alert("deny");
}

the bindings are set up but again they are only not working for elements in this dialog. If I remove the jquery dialog code it works. any ideas what I need to do here?

Upvotes: 0

Views: 1882

Answers (2)

Chris Holwerda
Chris Holwerda

Reputation: 1255

you need to change it be equal to a function

self.cancelConfirm = function() {
    alert("confirm");
}

or 

this.cancelConfirm = function() {
    alert("confirm");
}

Upvotes: 0

alecasciaro
alecasciaro

Reputation: 155

Try this http://jsfiddle.net/76EEt/1/

HTML

<a href="#" data-bind="click: $root.openDialog"> Open dialog </a> 
<div id="CancelModal" title="Cancel">
    Changes to the definition have been detected. Do you want to exit and discard    the changes?"   
    <div style="position: absolute; bottom: 8px; right: 8px; text-align: right">
        <input type="button" value="Yes" data-bind="click: cancelConfirm" />
        <input type="button" value="No" data-bind="click: cancelDeny" />
    </div>
</div>

JS

$("#CancelModal").dialog({
    modal: true,
    autoOpen: false,
    width: 400,
    minHeight: 150,
    maxHeight: 150,
    position: "center",
    resizable: false
});

var DataViewModel = function() {
    var self = this;

    self.cancelConfirm = function () {
         alert("confirm");
    };

    self.cancelDeny = function () {
         alert("deny");
    };

    self.openDialog = function () {
        $("#CancelModal").dialog("open");
    };
};

ko.applyBindings(new DataViewModel());

Upvotes: 1

Related Questions