I have a jQuery UI Dialog box, that I’m creating. It starts out as an empty div that I then populate via an Ajax call that is bound to the dialog’s open event.
Now, my issue is that when the dialog is first displayed, there is no content, so its height is very small. This causes the dialog to push downwards, off screen when the Ajax request completes. However, subsequent clicks to open the Dialog cause it to be repositioned correctly – perhaps the height is updated for future use after the initial resize?
My question is, is there an event I can trigger on the dialog to cause it to reposition itself after the Ajax request completes? I’ve browsed the documentation, but can’t find anything. I’m in the middle of looking through the source file right now for UIDialog, but figured I’d ask here while I’m reading.
EDIT: Here is a fiddle. Be sure to set the height variable inside of the open function, then click, close, and re-click.
It turns out just resetting the dialog’s position was enough:
http://jsfiddle.net/P9X9v/1/
Adding this to the open event function fixes it:
$(this).dialog("option", "position", "center");