Home/ Questions/Q 923821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T19:15:07+00:00

The file I’m loading into the modal dialog can vary in height. When the

  • 0

The file I’m loading into the modal dialog can vary in height. When the first link is opened, the top of the dialog is centered horizontally (meaning the dialog is positioned too low). After I close this and reopen again, with either the same edit button or a different one, the positioning is better.

It seems like it’s always one step behind: the first load it can’t tell what the width/height is of the file being loaded, then on a subsequent load of the same file, it’s positioned perfectly.

I’m using the following code as a modal edit for a data table:

$(".editMe").button({
    icons: {
        primary: 'ui-icon-document'
    },
    text: false
}).click(function () {
    var eventLink = $(this).attr("name");
    var dialogOpts = {
        title: "Make Modifications or Delete This Event",
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "auto",
        open: function () {
            //The height of the file below can vary, and in the
            //JS Bin environment the dialog loads just fine blank
            $("#modify").load("themes_edit.asp?id=" + eventLink);
        },
        close: function () {
            oTable.fnDraw();
        }
    };
    $("#modify").dialog(dialogOpts).dialog("open");
    return false;
});

And here’s some sample HTML (though the file loaded into #modify isn’t live). I’ve also set this up at JS Bin.

<html>
  <head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
      <button class="editMe" name="2810">edit</button>
      <button class="editMe" name="2811">edit</button>
      <button class="editMe" name="2812">edit</button>
      <button class="editMe" name="2813">edit</button>
      <div id="modify"></div>
  </body>
</html>
​

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The ‘one step behind’ will be because in your dialog open event you try to load the data. So when the dialog shows it will show the old content and then suddenly the new content will appear.

    One way to approach this is to open the dialog but first clear the existing content and show a loading gif whilst you wait for the ajax call to respond with the data, which you then load into the dialog.

    N.B If you are worried about the screen jerk when the dialog resizes then you could put the ajax response into a div that is positioned off screen then get the dimensions, then nicely animate the resize of the dialog whilst fading in the new content.

    var dialogOpts = {
        title: "Make Modifications or Delete This Event",
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "auto",
        close: function () {
            oTable.fnDraw();
        }
};

var $editDialog = $('#modify').dialog(dialogOpts);

$(".editMe").button({
    icons: {
        primary: 'ui-icon-document'
    },
    text: false
}).click(function () {

    var eventLink = $(this).attr("name");

    //clear existing dialog content and show an ajax loader
    $editDialog.html('<div class="loading" />');

    //show the dialog
    $editDialog.dialog("open");

    //get dynamic content and load it into the dialog and resize
    $.get("themes_edit.asp?id=" + eventLink, function(response){

        //fade out ajax loader
        $editDialog.find('div.loading').fadeOut(500, function(){

              $editDialog.html( response )
                         .dialog('option', 'position', 'center');

        });

    });

    return false;

});
    • 0