Going back is not working after level 2

[Sergiodiaz53]

Hi,

I have a nested-list created dynamically but I'm getting some problems navigating it. It loads correctly, and when I click on one element I go to the next level and in the bar appears '#ui-id-1'. Now, if I press the 'BACK' button it works fine (and it deletes the '#ui-id-1') but if I click again to go deeper '#ui-id-2' appears on the bar and if I click on the 'BACK' button it changes it for '#ui-id-1' but it doesn't load the previous level, and if I click again it goes to the first level, not the previous one.

I have checked with a simple list from: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_nestedlists2 and doesn't work.

Thanks in advance

[Sergiodiaz53]

Anyone could help me? =(

[Sergiodiaz53]

Well, the user 'ezanker' from Stackoverflow has helped me with my issue making some changes in the code. Now the nested lists with more sub levels are working more or less correctly. I said more or less because I have tested it with formatted lists (with 'h2' and 'p' tags, thumbnails, etc..) and it fails sometimes returning a empty list.

I'm revising the code but I let it here, maybe is useful for somebody o maybe somebody could fix the error.

(function( $, window, undefined ) {
$.widget( "mobile.listview", $.mobile.listview, {
    options: {
        childPages: true,
        page: "<div data-role='page'></div>",
        header: "<div data-role='header'><a href='#' data-rel='back'>Back</a><h1></h1></div>",
        content: "<div class='ui-content'></div>"
    },
    _create: function(){
        this._super();
        if( this.options.childPages ) {
            this._setupChildren();
        }
    },
    _setupChildren: function() {
        this._attachBindings();
        this.element.find( "ul" )
            .css( "display","none" )
            .parent()
            .addClass("ui-btn ui-btn-icon-right ui-icon-carat-r");
    },
    _attachBindings: function() {
        this._on({
            "click": "_handleSubpageClick"
        });
        this._on( "body", {
            "pagechange": function(){
                if ( this.opening === true ) {
                    this.open = true;
                    this.opening = false;
                } else if ( this.open === true ) {
                    //Don't remove the old LI
                    //this.newPage.remove();
                    this.open = false;
                }
            }
        });
    },
    _handleSubpageClick: function( event ) {
        if( $(event.target).closest( "li" ).children( "ul" ).length == 0 ) {
            return;
        }
        this.opening = true;
        //see if we already created the subpage
        var $li = $(event.target).closest( "li" );
        var pid = $li.data("nextpageid");
        if (pid && pid.length > 0){
            this.pageID = pid;
        } else {
            this.newPage = $( this.options.page ).uniqueId();
            this.nestedList  = $( event.target ).children( "ul" )
                .clone().attr( "data-" + $.mobile.ns + "role", "listview" )
                .css( "display", "block" );
            this.pageName = (
                $( event.target.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )?
                $( event.target.childNodes[0] ).text() : $( event.target.childNodes[1] ).text();
            this.pageID = this.newPage.attr( "id" );

            // Build new page
            this.newPage.append(
                    $( this.options.header ).find( "h1" ).text( this.pageName ).end()
                ).append(
                    $( this.options.content )
                ).find( "div.ui-content" ).append( this.nestedList );

            $( "body" ).append( this.newPage );
            //save subpage id as data attribute of the LI
            $li.data("nextpageid", this.pageID);
        }


        $( "body" ).pagecontainer( "change", "#" + this.pageID );
    }
});
})( jQuery, this );

[markgif]

@Sergiodiaz53 - Hey thanks, your code changes solved my problem with the back button. You saved me a lot of trouble.