Simple jquery-ui dialog with knockout

Question

I found a great example here: http://jsfiddle.net/63tGP/39/ (from this question: Knockout bootstrap modal issue) that allows a user to add items to a hierarchy by opening a bootstrap modal. The key was to use a knockout binding handler.

I would like to do this, only use a jquery-ui dialog instead. I've modified the fiddle, here: http://jsfiddle.net/63tGP/40/ ; only I get very strange results. Can someone please help me settle this out?

I've modified the binding handler, as such:

    ko.bindingHandlers.showModal = {
     init: function (element, valueAccessor) {
         $(element).dialog({ backdrop: 'static', keyboard: true, show: false });
     },
     update: function (element, valueAccessor) {
         var value = valueAccessor();
         if (ko.utils.unwrapObservable(value)) {
              $(element).dialog('open');
             $("input", element).focus();
         }
         else {

             $(element).dialog('close');
         }
     }
 };

The end goal is to create a simple, reusable component I can use for different levels of my hierarchy, for adding and editing an object.

Thanks!

Answer 1

Your code is correct, but you forget several things:

1. that JQuery UI requires JQuery.
2. that jquery-ui.js requires jquery-ui.css
3. you have to set the order by youself. jsfiddle willn't do it by default.

So correct order:

1. jquery-ui.css
2. knockout.js
3. jquery.js
4. jquery-ui.js

So, I placed scripts in order and your example start to work: http://jsfiddle.net/zaj814kz/1/

Also I recommend to you use Require JS loader for avoid such dependency errors in future. All these libs: JQuery, JQuery UI, Knockout - support this loader by default. For example knockout supports it at 14th string:

} else if (typeof define === 'function' && define['amd']) {

You will not worry about the order in which you have to set the files.Require JS will do it for you.This library will save to you a lot of hours, if you use it.