jQuery - Dialog auto-resize on dynamic content and maintain center position

None of the answers I found on the internet satisfied me while I was looking at the solution. Even this one doesn't. After reading a lot more about the JQuery API documentation, I found something really interesting. As this web page describe, you can bind an event in which it will be executed after the ajax request has done its job. Thing is, it's not simple as this; As I was doing my own tests, using the example provided in the API documentation, I couldn't make it to work. It seems like my JQuery dialog didn't exist in a "future" context manner.

This led me to this page which description was: Attach an event handler for all elements which match the current selector, now and in the future. Finding this leads me to create a function like this one:

$(document).live("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

And voila! It works like a charm! After the ajax request is done, the position property is changed and adapted to the content of the div and its dimensions!

Hope it helps people in the future!

EDIT: You might want to use the function ".on()" instead of ".live()". Since the time I wrote my answer, it seems like the function ".live()" as been removed in version 1.9 of jQuery and replaced by the new one. A more appropriate solution for users of jQuery >= 1.9 would be something like this:

$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});