Progress Bar On Complete Event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bar, complete, event, jqxprogressbar, on complete, progress, progress bar

This topic contains 2 replies, has 2 voices, and was last updated by tom.morgan019 11 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Progress Bar On Complete Event Posts

February 25, 2013 at 12:46 pm Progress Bar On Complete Event #15819

Member

Hi.

I’m trying to use the progress bar on complete event but it’s not behaving how I’m expecting and I need some advice please.

My progress bar is in a hidden div. I want to show the div, set the progress bar value 100, wait for the animation to finish, then hide the div again.

The problem is the progress bar on complete event fires BEFORE the animation has finished, so the bar never completes (or doesn’t show at all most of the time!).

How can I force the on complete event to wait until the animation has finished before doing anything?

Thanks

My code is the following:

$(document).ready(function () {
$(“#jqxProgressBar”).jqxProgressBar({
theme: theme,
width: 250,
height: 30,
value: 0,
animationDuration: 300
});

$(“#jqxProgressBar”).on(‘valuechanged’, function (event) {
$(‘#loading’).show();
});

$(“#jqxProgressBar”).on(‘complete’, function (event) {
$(“#loading”).hide();
});
});

function HandleEvent() {
$(“#jqxProgressBar”).jqxProgressBar({ value: 100 });
}

February 25, 2013 at 1:38 pm Progress Bar On Complete Event #15824

Dimitar

Participant

Hello tom.morgan019,

Thank you for your feedback. We confirm the reported issue. Here is a workaround on the matter:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var duration = 500;
            $("#jqxProgressBar").jqxProgressBar({
                width: 250,
                animationDuration: duration,
                height: 30,
                value: 0,
                animationDuration: 300
            });
            $("#jqxProgressBar").on('valuechanged', function (event) {
                $('#loading').show();
            });
            $("#jqxProgressBar").on('complete', function (event) {
                setTimeout(function () {
                    $("#loading").hide();
                }, duration);
            });
            setTimeout(function () {
                $("#jqxProgressBar").jqxProgressBar({ value: 100 });
            }, 1000);
        });
    </script>
</head>
<body class='default'>
    <div id="loading">
        <div id="jqxProgressBar">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

February 25, 2013 at 2:24 pm Progress Bar On Complete Event #15827

tom.morgan019

Member

Thanks Dimitar, that gets around the problem.

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.