获得当前活动的页面ID

Question

背景

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

我想要实现

我基本上是想获得当前活动页的页ID是什么。正如我想获取当前正在查看的网页的ID一样。我尝试以下

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

它只是给了我第二个静态页面的页面ID，而不是动态生成的页面，因为当我向左滑动即可查看我的dyanamically生成的网页控制台日志不会在打印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在页面显示后立即检测页面ID（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);