Using Knockout.js, Jquery Dialog and Jquery-UI for a Dialog Popup

Ever since I started playing with Knockout.js several months ago, I can’t get enough. Where have you been all my programming days? There does not seem to be any limitation (I am sure there are) only opportunities. I decided to use knockout to control a CRUD project which has a popup dialog for adding or editing a record. It is not as straight forward as it should be but then again you know this because you are here. Adding to this, implementing Jquery-UI together and all this has to be done in the right order with the right syntax. Enjoy and drop me a note if you can improve this! See comments in the code:

[code language=”html”]
<html xmlns="">
<head runat="server">
<link rel="stylesheet" href="" />
<script src=""></script>
<!–This should be obvious–>
<script src=""></script>
<script src="knockout-latest.js"></script> <!–Latest Version of Knockout.js–>
<script src="knockout-jqueryui.min.js"></script> <!–Knockout – jqueryui Binding –><br />
<form id="form1" runat="server">
<button data-bind="click: $root.DialogOpen">Open</button>
<!–Binding of Button–>
<!–This is the dialog pop up window for editing and adding an existing item –>
<div id="dialog" data-bind="dialog: { ‘autoOpen’: false, ‘title’: DialogTitle, ‘width’: ‘500px’, ‘modal’: ‘true’ }, dialogVisible: isDialogOpen">
<label for="txtEquipID">Id:</label>
<input type="text" id="txtEquipID" data-bind="value: EquipID" disabled="disabled" class="text ui-widget-content ui-corner-all" />

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<!– <button data-bind="click :$">Save</button> –>
<input type="button" data-bind="button: { text: ‘Cancel’, label: ‘Cancel’ }, click: DialogClose" /> <!–Closes the dialog–>
<!–<button data-bind="click: $root.update">Update</button>–>
<script type="text/javascript">
//This handles all of the heavy lifting when it comes to opening and closing the dialog
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor, allBindingsAccessor)
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
//do in a setTimeout, so the applyBindings doesn’t bind twice from element being copied and moved to bottom
setTimeout(function () {
options.close = function () {
}, 0);

//handle disposal (not strictly necessary in this scenario
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
update: function (element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
$el = $(element),
dialog = $"uiDialog") || $"dialog"),
options = valueAccessor();
//don’t call dialog methods before initialization
if (dialog) {
$el.dialog(shouldBeOpen ? "open" : "close");
for (var key in options) {
if (ko.isObservable(options[key])) {
$el.dialog("option", key, options[key]());

/* -Standard knockout – */
var EqpViewModel = function () {
var self = this;
//****These are bindings necessary to help with the Dialog Box *****
//**** which allows opening and closing it. *****
self.isDialogOpen = ko.observable(false);
self.DialogOpen = function () {
self.DialogClose =
function () {
//Title of the Dialog Popup Window
self.DialogTitle = ko.observable("Update Equipment")
//This sets the values if someone opens up a ‘Add New
self.DialogNewOpen = function () {
self.EquipID = ko.observable("0");
ko.applyBindings(new EqpViewModel());

code files:

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *