jquery dialog position not working with width:auto - need to auto resize after opening

Question

I'm having problems with a jquery dialog. I'm clicking on a button to open a modal dialog and load ajax contents into it. The size of the contents can vary, and I'd like the dialog to always position in the middle, regardless of whether it's 300px or 1200px wide.

I initiate the dialog like this:

$(".dialog-form").dialog({
  autoOpen: false,
  modal: true,
  open: function() {
    $("#background-dim").fadeIn();
  },
  position: {my:"center top",at:"center top+40"},
  width: "auto"
});

And this is the button that I click on to open it and load the data:

$(".dialog-opener").click(function() {
  $("#" + temp_divid).load(temp_form).dialog("open");
  // I tried putting resize function here but does not work
  alert ("test");
  return false;
});

Now I've tried putting an option to change the dialog size immediately after I open it in the dialog-opener function, but it doesn't work. I put an alert in to see what's happening and even though I've loaded the data and opened the dialog it's not showing the loaded dialog box yet, so it doesn't know the correct width. What am I doing wrong, any ideas? Thanks for your help :)

Answer 1

solved it with the help of this question: jQuery - Dialog auto-resize on dynamic content and maintain center position

ajaxStop is called whenever ajax finishes loading, so I'm resizing the dialog when ajaxStop is called and it's works perfectly!

$(document).ajaxStop(function(){
  $(".dialog").dialog({height:"auto",width:"auto"});
});