How to cancel jQuery UI dialog open?

Question

I have the following:

container.dialog().bind('dialogopen', function(event, ui)
  {
     ...
     if (someCondition)
     {
         $(this).dialog('close'); // the dialog is not closed!
     }
  }

How I should make it work?

Unfortunately there is no 'beforeopen' event to be hooked.

Answer 1

Look into autoOpen (set it to false) to keep it hidden until you confirm someCondition. Then call .dialog("open") …

Answer 2

The open event in dialog is like 'beforeopen'.

Answer 3

The problem here is you need to bind the event before it happens. Currently you're calling .dialog() which opens the dialog (unless autoOpen: false is a provided option). This means before your .bind(....) runs, the event already occured. The solution is to just bind before the event happens, like this:

container.bind('dialogopen', function(event, ui) {
  if (someCondition) {
     $(this).dialog('close'); // the dialog is not closed!
  }
}).dialog(); //.dialog() fires "dialogopen" as part of it's execution

You can view a demonstration here, it'll prevent the dialog from opening, or rather it does open, but instantly closes before the UI thread updates, so to the user, it never opened.

This works because the dialogopen event is fired on the element you turned into a dialog (not the dialog container)...it doesn't matter that the dialog itself is created later, this is just a DOM element listening to events.