jquery-ui dialog doesn't open immediately
Question
I'm trying to create a simple display of progress for the user while actions are happening. While doing this I noticed jquery-ui dialog didn't open until all javascript had finished.
I have created some pseudo code but the example shows the issue: Working example: http://jsbin.com/isivus
Code
<!DOCTYPE html>
<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.13/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>HoL</title>
</head>
<script>
$(function() {
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
closeOnEscape: false
});
$(".ui-dialog-titlebar").hide();
$("#progressbar").progressbar({
value: 0
});
$('input').click(function() {
$('#dialog').dialog('open');
for (i = 0; i < 100000; i++) {
var span = document.getElementById('span');
$('span').text(i);
}
});
});
</script>
<body>
<div id="dialog">
<span class="dialogText">text</span>
<div id="progressbar"></div>
</div>
<input type="button" value="Click me!" />
<span id="span"></span>
</body>
The dialog doesn't open until the loop has finished. Seeing as I want to show the dialog, and update the text while the loop is running this isn't really working.
I am no javascript expert and have no clue where the issue is coming from, hoping any of you could help
2 answers
solution1
1 ACCPTED 2012-05-03 10:29:40
Your loop will block everything (most likely the whole browser ) while it's running.
Split it into small chunks of maybe 10 or 100 loops and then continue asynchronously (ie with a zero-delay setTimeout).
Here's some code that might do the job:
$('input').click(function() {
$('#dialog').dialog('open');
var i = 0, elem = $('#span');
function loop() {
for(var end = i + 100; i < end; i++) {
elem.text(i);
}
if(i < 100000) {
window.setTimeout(loop, 0);
}
}
loop();
});
solution2
-1 2012-05-03 10:33:13
Move the for loop inside a standalone function, and use the dialogs open event to call it.
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
open: myBlockingLoopFunction,
closeOnEscape: false
});
function myBlockingFunction() {
// your loop here
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.