Cannot call methods on dialog prior to initialization

Question

I am trying to open a div in a jQuery dialog. After opening the div as a dialog, when I click on the overlay area, I get this error.

Cannot call methods on dialog prior to initialization. attempt to call method 'close'.

Here is what I tried so far:

<div class="mydiv"></div>
var options = {
  modal: true,
  draggable: true,
  resizable: false,
  position: "center",
  buttons: {
    OK: function () {
      $(this).dialog("close");
    }
  },
  close: function () {
    $(".ui-dialog").remove();
  }
};
var dg = $(".mydiv").dialog(options);
$(dg).dialog("open");

//document.ready

$(".ui-widget-overlay").live("click", function () { $(".mydiv").dialog("close"); });

there may be many div with the same class name ".mydiv".

Answer 1

The buttons property takes an array of objects that define a text property and a click property containing the event handler.

var options = {
  modal: true,
  draggable: true,
  resizable: false,
  position: "center",
  buttons: [{
    "text": "OK",
    "click": function () {
      $(this).dialog("close");
    }
  }],
  close: function () {
    $(".ui-dialog").remove();
  }
};

For more information checkout the documentation.

Working Example http://jsfiddle.net/unWzC/