Simple Dialog widget factory question

Simple Dialog widget factory question

Trying to create a custom Dialog extension using the widget factory and jquery UI 1.10.4  This snippet illustrates the problem. I want to set up a "Close" button automatically. However, I can't seem to make it work. The snippet below is as close as I've come thus far, and it crashes in the jquery-ui script on the first line of the dialog widget's _create method.

I have tried adding my own _create method and calling _super() but that also didn't work.

  1. <button id="btnTestDlg" >Test the dialog</button>
  2. <div id="dialogDiv" title="WooHoo! Test Me Baby!" style="background: blue;">
  3. </div>
  4. <script type="text/javascript">
  5.     $.widget("EZ.testDialog", $.ui.dialog, {
  6.         options: {
  7.             autoOpen: false,
  8.             buttons: [
  9.                 {
  10.                     self: this,
  11.                     text: "Cancel",
  12.                     icons: { primary: "ui-icon-cancel" },
  13.                     click: function () {
  14.                         $(self).testDialog().testDialog("close");
  15.                     }
  16.                 }
  17.             ],
  18.         }
  19.     });

  21.     $(document).ready(function () {
  22.         $('#dialogDiv').testDialog({
  23.                 width: 700,             // these options are same as Jquery UI Dialog
  24.                 height: 520,
  25.                 modal: true,
  26.                 show: {
  27.                     effect: "slide",
  28.                     duration: 400
  29.                 },
  30.                 hide: {
  31.                     effect: "slide",
  32.                     duration: 400
  33.                 },
  34.         });
  35.         $('#btnTestDlg').click(function() {
  36.             $('#dialogDiv').testDialog("open");
  37.         });
  38.     });
  39. </script>