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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!–This should be obvious–>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!–Jquery-UI–>
<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">
<div>
<button data-bind="click: $root.DialogOpen">Open</button>
<!–Binding of Button–>
</div>
<!–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">
<fieldset>
<label for="txtEquipID">Id:</label>
<input type="text" id="txtEquipID" data-bind="value: EquipID" disabled="disabled" class="text ui-widget-content ui-corner-all" />
</fieldset>

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<!– <button data-bind="click :$root.save">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>–>
</div>
</div>
</div>
</form>
</body>
<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 () {
allBindingsAccessor().dialogVisible(false);
};
$(element).dialog(ko.toJS(options));
}, 0);

//handle disposal (not strictly necessary in this scenario
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
$el = $(element),
dialog = $el.data("uiDialog") || $el.data("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.isDialogOpen(true);
}
self.DialogClose =
function () {
self.isDialogOpen(false);
}
//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("0")
self.isDialogOpen(true)
}
self.EquipID = ko.observable("0");
}
ko.applyBindings(new EqpViewModel());
</script>
</html>
[/code]

code files: knockout-and-jquery-modal.zip

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 *