0

I'm using a jQuery dialog whose contents are variable in size. I populate the contents dynamically with the create method. When the dialog renders, the top-left corner of the dialog is positioned in the center of the screen, but since the dialog is quite tall, the bottom goes well off the page. I'd like for it to be perfectly-centered regardless of the size of the dialog. Here's the jQuery:

var dialogOptions = {
    title: "",
    modal: true,
    width: 'auto',
    autoOpen: false,
    create: function () {
        $(this).load("/Management/RenderPartialCreateSubject");
    }
};

$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");

The only thing I can figure is that the content isn't being loaded before the dialog is positioned. Any way to get it to load content beforehand?

I've also tried loading the partial view straight into the div and then opening the dialog like so:

$.get("/Management/RenderPartialCreateSubject", null, function (data) {
    $("#dialog-message").html(data);
});
//open add new subject dialog
var dialogOptions = {
    title: "",
    modal: true,
    width: 'auto',
    autoOpen: false
};

$("#dialog-message").dialog(dialogOptions);
$("#dialog-message").dialog("open");

Which renders incorrectly the first time, but it works the second time (after the content has been loaded).

Tevis
  • 729
  • 1
  • 12
  • 27
  • Try adding `$("#dialog-message").hide().delay(500).show();` after your second example, or you could try adding `.dialog("close").dialog("open")` to the end of `$("#dialog-message").dialog("open");`. I'm afraid I try to avoid dialogs, so I make no promises. – Christopher Esbrandt Jan 05 '15 at 21:13

1 Answers1

0

I'll wait to see if someone has a better answer, but I was able to solve it by replacing the $.get with $.ajax and setting async: false, which allows the content to load before displaying the dialog.

Tevis
  • 729
  • 1
  • 12
  • 27