Question

背景

我的应用包含2个静态页面和x个动态生成的页面。动态生成的页面的数量会不时变化。我的第一个静态页面是登录页面。登录后，您将进入第二个静态页面，这是一个欢迎屏幕，然后您可以开始向左滑动以查看动态生成的页面。

我想要实现的目标

我基本上想要获取当前活动页面的页面ID。因为我想获得我正在查看的页面的ID。我尝试了以下

pageId = $('body').pagecontainer('getActivePage').prop("id"); 
console.log('==========================>THIS IS ID: '+pageId);

它只给我第二个静态页面的页面ID而不是动态生成页面的id，因为当我向左滑动以查看我的动态生成的页面时，控制台日志根本不打印。

以下是整个相关js的代码

var widgetNames = new Array();
var widgetId = new Array();
//ActivePageId
var pageId = ''

$(document).on("pagecreate", function () {
    $("body > [data-role='panel']").panel().enhanceWithin();

});

$(document).on('pagecreate', '#page1', function () {

    $("#log").on('click', function () {

        $.ajax({
            url: "script.login",
            type: "GET",
            data: {
                'page': 'create_user',
                    'access': 'user',
                    'username': $("input[name='username']").val(),
                    'password': $("input[name='password']").val()
            },
            dataType: "text",
            success: function (html) {
                console.log(html);
                widgetNames = new Array();
                widgetId = new Array();
                var res = html.match(/insertNewChild(.*);/g);
                for (var i = 0; i < res.length; i++) {
                    var temp = res[i].split(',');
                    if (temp.length >= 3) {
                        widgetNames[i] = (temp[2].replace('");', '')).replace('"', '');
                        widgetId[i] = temp[1].replace("'", "").replace("'", "").replace(/ /g, '');
                    }
                }
                var AllWidgets = ''
                var testwidget = new Array();
                var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);

                for (var i = 0; i < tempWidgetContent.length; i++) {
                    var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{') + 1);

                    testwidget[i] = widgetContent.replace("site +", "");
                }
                var widgetPart = new Array();
                for (var i = 0; i < widgetNames.length; i++) {
                    var pageHeaderPart = "<div data-role='page' id='" + widgetId[i] + "' data-pageindex='" + i + "' class='dynPageClass'><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#panel' data-role='button' data-icon='flat-menu'></a><h1>BASKETBALL FANATICO</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'>";
                    var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";
                    var check = "<div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>" + widgetNames[i] + "</div>";
                    widgetPart[i] = '<DIV style=\" text-align: center; background-color:#989797; font-size: 75pt;\" id=widgetContainer_' + widgetId[i] + '></DIV><SCRIPT>' + 'function UpdateWidgetDiv' + widgetId[i] + '() {' + testwidget[i] + '$(\"#widgetContainer_' + widgetId[i] + '").html(counterValue);' + '}' + 'setInterval(function(){UpdateWidgetDiv' + widgetId[i] + '()},3000)' + '</SCRIPT>';
                    AllWidgets += '<a href="#' + widgetId[i] + '" class="widgetLink" data-theme="b" data-role="button" >' + widgetNames[i] + '</a>';
                    var makePage = $(pageHeaderPart + check + widgetPart[i] + pageFooterPart);

                    makePage.appendTo($.mobile.pageContainer);
                }
                $('#items').prepend(AllWidgets).trigger('create');

                //Get Active Page ID
     $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
                          pageId = $('body').pagecontainer('getActivePage').prop("id"); 
                          alert( "The page id of this page is: " + pageId );
                          });

            }
        });
    });
});

如果我是初学者，请提出建议并抱歉。

Answer 1

您正在从ajax调用中获取活动页面，而不是在刷新到新页面时。

当您在其中一个动态网页上时，需要触发检测代码，表示您可以在页面显示后立即使用pagecontainershow检测pageID（http://api.jquerymobile.com/pagecontainer/#event-show）。

$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
    pageId = $(":mobile-pagecontainer" ).pagecontainer('getActivePage').prop("id"); 
});

更新：更新页面时使用pageid：

看起来您希望活动页面上每3秒更新一次。所以为整个页面创建一个函数：

function UpdateActivePage(){
    //get active page
    pageId = $(":mobile-pagecontainer" ).pagecontainer('getActivePage').prop("id");
    //figure out index
    var idx;
    for (var i=0; i<widgetId.length; i++){
       if (widgetId[i] == pageid){
          idx = i;
          break;
       }
    }

    //run your update
    eval(testwidget[idx]);
    $("#widgetContainer_" + pageid).html(updated stuff);

}

setInterval(UpdateActivePage, 3000);

获取当前活动的页面ID

1 个答案: