Creating Pages Dynamically

The following is my code where i am updating the content of the dynamically created pages constantly but the problem is my update function is running every 3 seconds on pages that i am not even viewing. i am not able to fix this.

var widgetNames = new Array();
var widgetId = new Array();



$( 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>";

                        widgetPart[i] = '<DIV style=\" text-align: center; font-size: 100pt;\" 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 + widgetPart[i] + pageFooterPart);

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

                    var page = $('body').pagecontainer('getActivePage').prop("id");  

                    console.log('The Page Id is: '+page);

                }
        });
    });
});

In this code i am looking to run the following function

'setInterval(function(){UpdateWidgetDiv'+widgetId[i]+'()},3000)'

only for the page the user is viewing.

Answers


Here is a DEMO

When creating the pages, as well as saving the page ids in the widgetId array, I am also saving the current page index as a data attribute on each dynamic page (data-pageindex), and I am assigning a class to all the dynamic pages (dynPageClass):

for (var i = 0; i< 3; i++){
    var pageid = 'dynPage' + i;
    widgetId.push(pageid);
    var p = '<div data-role="page" id="' + pageid + '" data-pageindex="' + i + '" class="dynPageClass">';
    p += '<div data-role="header"><h1>Dyn Page' + i + '</h1></div>';
    p += '<div role="main" class="ui-content">I am dynamically created</div>';
    p += '<div data-role="footer"><h1>Footer</h1></div>';
    p += '</div>';
    $('body').append($(p));
}

The the swipe code can be handled with one handler on the dynPageClass that handles both swipeleft and swiperight:

$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
    var ind = parseInt($(this).data('pageindex'));
    var topageid = "page2";
    var rev = true;
    if (e.type == 'swiperight'){
        if (ind > 0){
            topageid = widgetId[ind - 1] ; 
        }
    } else {
        rev = false;
        if (ind < widgetId.length - 1){
            topageid = widgetId[ind + 1] ; 
        }            
    }
    $.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
});

We first get the current page's index from the data attribute and parse it into an integer. Then we see if this is a right or left swipe. If right, and index is greater than 0, we need to go back one dynamic page. Otherwise it is a left swipe and if current page is not the last one, we need to go forward one page.

Your swipeleft code on page2 is left intact:

$(document).on("swipeleft", "#page2", function() {
   $.mobile.changePage("#"+widgetId[0], {transition: "slide", reverse: false});
});

Need Your Help

Searching for multiple partial phrases so that one original phrase can not match multiple search phrases

javascript algorithm data-structures autocomplete autosuggest

Given a predefined set of phrases, I'd like to perform a search based on user's query. For example, consider the following set of phrases:

How to link buttons in visual studio with c#?

c# facebook button

I just want it so that whenever I click on like button one, like button two should be clicked as well.