jQuery UI Widgets Forums Editors ProgressBar Progress Bar On Complete Event

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Progress Bar On Complete Event #15819

    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 });
    }

    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/

    Progress Bar On Complete Event #15827

    Thanks Dimitar, that gets around the problem.

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

You must be logged in to reply to this topic.