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:

<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

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 *