Hi guys, I'm writing a simple script in order to show in a webdialog a progressbar using jQuery. It seems to work but when I try to update the value (inside a cicle) it looks freezed and doesn't update anything.....SU works and when the cicle is finished the progressbar is closed as I expected....
https://drive.google.com/file/d/0ByveTT29NhAlWmJ6bUExZjJ2SkU/view?usp=sharing
height = view.vpheight
width = view.vpwidth
dlgPROGRESSBAR = UI;;WebDialog.new("MyProgressBar", false, "", 350, 70, width/2, height/2, false);
dlgPROGRESSBAR.navigation_buttons_enabled = false
dlgPROGRESSBAR.bring_to_front()
sourceHTML = File.join(File.expand_path("..",__FILE__),"progressbar.html")
dlgPROGRESSBAR.set_file(sourceHTML)
dlgPROGRESSBAR.show
In order to update the value and the label I use
js='$( "#progressbar" ).progressbar({value; 5});'
dlgPROGRESSBAR.execute_script(js)
js='$(".progress-label").text("Loading data ...");'
dlgPROGRESSBAR.execute_script(js)
For example if I have 3 steps, say at 10%, 20%, while the latter goes from 20 to 100% into a cicle (iterate an array).
I can do a "manual" update, for step 1-2, with the code above (changing the value) while for the latter I try to do an automatic update inside the cicle:
anArray = [...]
#STEP 1 (0% - 10%)
js='$( "#progressbar" ).progressbar({value; 10});'
dlgPROGRESSBAR.execute_script(js)
# STEP 2 (10% - 20%)
js='$( "#progressbar" ).progressbar({value; 20});'
dlgPROGRESSBAR.execute_script(js)
# STEP 5 (20% - 100%)
# function calling
result = processMyArray(anArray)
if result
dlgPROGRESSBAR.close()
end
def processMyArray(array)
begin
nTOT = array.length
n = 0
array.each{|e|
incr = (20 + 100*n/nTOT).round(0) # starting from 20% ....
js='$( "#progressbar" ).progressbar({value; ' + incr.to_s + '});
dlgPROGRESSBAR.execute_script(js)
# do some stuff with e
}
return true
raise
return false
end
end
The html is
<!doctype html>
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]> <!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<style>
body {
font-family; "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size; 62.5%;
}
.ui-progressbar {
position; relative;
height; 20px;
}
.progress-label {
position; absolute;
left; 35%;
top; 4px;
font-weight; bold;
text-shadow; 1px 1px 0 rgb(255,255,255);
text-color; rgb(255,255,255);
}
#progressbar .ui-progressbar-value {
background; rgba(0, 0, 110, 1);
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" );
var progressLabel = $( ".progress-label" );
progressbar.progressbar({
value; 0, // Number; A value between 0 and the max. Boolean; Value can be set to false to create an indeterminate progressbar.
change; function() {
// none to do
},
complete; function() {
progressLabel.text( "Complete!" );
setTimeout( function() {}, 1000 );
}
});
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</body>
</html>
I can't understand how you link the loop with those two functions....