CODEWITHSUNDEEP
jquery-uijquery-mobile
Oudin
Oudin

Reputation: 483

JQuery Mobile don't show progress bar when page load via Ajax

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

Upvotes: 1

Views: 2239

Answers (1)

codaniel
codaniel

Reputation: 5253

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/

Upvotes: 1

Related Questions