How do I get jQueryUI to display a dialog when something long running is executing in the main thread?
My code is doing something very expensive - building a whole bunch of UI elements - so I want to display a dialog to say to "Please wait".
This, obviously, doesn't work:
$(function () {
$("#开发者_开发知识库pleasewaitdialog").dialog({
'modal': true,
'autoOpen': false,
});
alert("test program started");
// open the dialog
$("#pleasewaitdialog").dialog("open");
// simulate doing something expensive;
for (var i=0; i<500000000; i++);
// close the dialog
$("#pleasewaitdialog").dialog("close");
alert("test program ended");
});
The UI won't update because it's blocked doing the for loop.
I tried this:
$(function () {
$("#pleasewaitdialog").dialog({
'modal': true,
'autoOpen': false,
});
alert("test program started");
// open the dialog
$("#pleasewaitdialog").dialog("open");
setTimeout(function () {
// simulate doing something expensive;
for (var i=0; i<500000000; i++);
// close the dialog
$("#pleasewaitdialog").dialog("close");
alert("test program ended");
},1);
});
And that actually works fine in Safari (between the two alerts the JQueryUI dialog shows.) But in Chrome (10.0.648.127 for Mac) the jQuery UI dialog doesn't display. [Update: Actually, this solution works. You need to make sure you don't have it in a document with a broken <title> tag mind (see answers below)]
jQueryUI (jQuery 1.5.1 and jQueryUI 1.8.10) won't display a dialog in Chrome (10.0.648.127, Mac) if you have a broken <title> tag for some reason.
The following code works fine in Safari, but doesn't work in Chrome.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
$(function () {
$("#pleasewaitdialog").dialog({
'modal': true,
'autoOpen': false,
});
alert("test program started");
// open the dialog
$("#pleasewaitdialog").dialog("open");
setTimeout(function () {
// simulate doing something expensive;
for (var i=0; i<500000000; i++);
// close the dialog
$("#pleasewaitdialog").dialog("close");
alert("test program ended");
},1);
});
</script>
<!-- the broken close title tag here means that the
jQuery dialog below won't display on Chrome -->
<title>Test Dialog</tile>
</head>
<body>
<div id="pleasewaitdialog" title="Please Wait">Reticulating Splines</div>
</body>
</html>
加载中,请稍侯......
精彩评论