Menu
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>
992
A more reliable solution would be to add your own existence indicator at dialog initialization: $("#popup"). attr("_dialogInitialized", "yes"). dialog( { ... } )
Dialog close() Method The close() method closes the dialog. Tip: This method is often used together with the show() method.
You can trigger a re-center once the content is loaded (so you know the size), like this:
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
open: function () {
$("#modify").load("themes_edit.asp?id=" + eventLink, function() {
$(this).dialog('option', 'position', 'center');
});
},
close: function () {
oTable.fnDraw();
}
};
This just uses the callback for .load() and sets the position option, which triggers a re-center at the appropriate time...which is as soon as you know what the correct size is.
As a side note, since you're creating and then opening the dialog, you can remove both the autoOpen: false, property and .dialog("open"), the default behavior is to open immediately :)
179
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;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
