Home/ Questions/Q 7971811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:42:55+00:00

I’m building an app utilizing JQuery Mobile in which I’m showing a progress bar

  • 0

I’m building an app utilizing JQuery Mobile in which I’m showing a progress bar to indicate to the user their progress based on the steps completed.

For the progress bar I’m utilizing JQuery UI which is simple to implement

<script>
   $(document).ready(function(){     

        var currentStep = $("#formNumber").val(); //get the the current step from form  
    var totalSteps = 8;
    var formProgress = 0;

        // determine overall form progress after step is completed  
    if (currentStep >1) {         
        formProgress = (currentStep-1)/totalSteps*100;
        }   

    // Set progress value
    $("#progressbar").progressbar({value: formProgress});
    $('#percentage').text(formProgress);

   });// End function

</script>

However since the pages in JQuery Mobile are loaded via Ajax the progress bar does not show. I’m guessing it’s because the “#progressbar” div is empty.

if the pages loads without Ajax it will show the progress bar. Any one knows how i can solve this by allowing the progress bar to show when the page loads via Ajax

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Bind to pageinit not dom ready or in this case i bind to pageshow. In a JQM ajax app dom ready only happens once on the first page. So any new content brought into the dom doesn’t get the benefit of the code you wrote. Also when the second page is brought into the dom. The first page doesn’t go anywhere its just hidden. Because of this using the same id in every page causes problems. Get used to using classes instead. If you need to pick something out of the current page use the .ui-page-active class to help you select the appropriate element.

    Something like $('.ui-page-active .formNumber') will select the correct input for you. So here is my revised first step according to the info you gave me.

    index.html

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Step 1</title>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript">
            function getProgress(){
                var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form  
                var totalSteps = 4;
                var formProgress = 0;

                // determine overall form progress after step is completed  
                if (currentStep >1) {         
                    formProgress = (currentStep-1)/totalSteps*100;
                }
                $(".ui-page-active .progressbar").progressbar({value: formProgress});
            }

            $(document).on('pageshow',function(){
                getProgress();
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="step1">

            <div data-role="header">
                <h1>Step 1</h1>
            </div><!-- /header -->

            <div data-role="content">
                <input type="hidden" class="formNumber" value="1" />
                <div class="progressbar"></div>
                <a href="step2.html" data-role="button">Step 2</a>        
            </div><!-- /content -->

        </div>


    </body>
</html>

    step2.html

    <div data-role="page" id="step2">

    <div data-role="header">
        <h1>Step 2</h1>
    </div><!-- /header -->

    <div data-role="content">
        <input type="hidden" class="formNumber" value="2" />
        <div class="progressbar"></div>
        <a href="step3.html" data-role="button">Step 3</a>        
    </div><!-- /content -->

</div>

    step3.html

    <div data-role="page" id="step3">

    <div data-role="header">
        <h1>Step 3</h1>
    </div><!-- /header -->

    <div data-role="content">
        <input type="hidden" class="formNumber" value="3" />
        <div class="progressbar"></div>         
        <a href="step4.html" data-role="button">Step 4</a>        
    </div><!-- /content -->

</div>

    …… and on and so forth

    If you interested I made a sample for you to look at. http://starwebservices.net/so/

    • 0