jQuery UI Modal Dialog only centered on SECOND load (content from external file)?
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开发者_StackOverflow中文版 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>
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 :)
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;
});
I'm not sure if I'm missing something, but here is how I did it. I have a div inside the dialog with an ID, when I want to open the dialog I run a function that loads the content into the div inside the dialog first, then on the load complete I open the dialog. (ex: $("#foo").load("/filepath.html", function(){ $("#dialog").dialog("open"); });
加载中,请稍侯......
精彩评论