通过 Ajax 加载页面时 JQuery Mobile 不显示进度条答案

【问题标题】：JQuery Mobile don't show progress bar when page load via Ajax通过 Ajax 加载页面时 JQuery Mobile 不显示进度条
【发布时间】：2012-05-20 21:00:24
【问题描述】：

我正在使用 JQuery Mobile 构建一个应用程序，其中我显示了一个进度条，以根据已完成的步骤向用户指示他们的进度。

对于进度条，我使用的是易于实现的 JQuery UI

<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>

但是，由于 JQuery Mobile 中的页面是通过 Ajax 加载的，因此进度条不会显示。我猜是因为“#progressbar” div 是空的。

如果页面在没有 Ajax 的情况下加载，它将显示进度条。任何人都知道我可以通过允许进度条显示页面何时通过 Ajax 加载来解决这个问题

【问题讨论】：

标签： jquery-ui jquery-mobile

【解决方案1】：

Bind to pageinit not dom ready 或者在这种情况下我绑定到 pageshow。在 JQM ajax 应用程序中，dom 就绪只在第一页上发生一次。因此，任何带入 dom 的新内容都不会从您编写的代码中受益。当第二页被带入dom时也是如此。第一页没有去任何它只是隐藏的地方。因此，在每个页面中使用相同的 id 会导致问题。习惯于使用类。如果您需要从当前页面中选择某些内容，请使用 .ui-page-active 类来帮助您选择合适的元素。

$('.ui-page-active .formNumber') 之类的东西会为您选择正确的输入。所以这是我根据你给我的信息修改的第一步。

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>

……等等

如果您有兴趣，我制作了一个样本供您查看。 http://starwebservices.net/so/

【讨论】：

感谢@codaniel 的回复，但是id 或类不是问题，因为我没有使用上面提到的Jquery moible 单页选项。我正在使用 Multi-page 选项进度条在所有页面上都可以正常工作，但前提是页面不是通过 Ajax 加载的。只是想知道是否有人知道解决方法
我知道，但即使有单独的页面，它仍然是同一个问题。您不能有两个具有相同 id 的不同 div。即使您看不到第一页，它仍然在 dom 中。
再次感谢我尝试过，如果页面是通过 Jquery Mobile AJAX 加载的，则将 id 转换为类仍然是相同的问题，进度条仍然不显示，但显示页面是否在没有它的情况下加载.进度条
实际上是在页脚中，而不是在每个单独的页面上。然而，当每个页面被加载时，页脚被包含为一个通用文件
如果可以，请显示您的代码，因为它在我的本地主机上运行良好。我尝试了多页面布局和单页面布局。
这里是 Jquery $(document).ready(function(){var currentStep = $("#formNumber").val(); //获取当前步骤 var totalSteps = 8; var formProgress = 0; // 确定表单进度 if (currentStep >1) { formProgress = (currentStep-1)/totalSteps*100; } $("#progressbar").progressbar({value: formProgress}); $(' #percentage').text(formProgress);});// 结束函数