diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 9fd9a6605eb..3e29ded088f 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -5,6 +5,10 @@ * http://jquery.org/license */ (function($, undefined ) { +//Keeps track of the number of lists per page UID +//This allows support for multiple nested list in the same page +//https://github.com/jquery/jquery-mobile/issues/1617 +var listCountPerPage = {}; $.widget( "mobile.listview", $.mobile.widget, { options: { @@ -189,23 +193,31 @@ $.widget( "mobile.listview", $.mobile.widget, { _idStringEscape: function( str ){ return str.replace(/[^a-zA-Z0-9]/g, '-'); }, - + _createSubPages: function() { var parentList = this.element, parentPage = parentList.closest( ".ui-page" ), - parentId = parentPage.jqmData( "url" ), + parentUrl = parentPage.jqmData( "url" ), + parentId = parentUrl || parentPage[ 0 ][ $.expando ], + parentListId = parentList.attr( "id" ), o = this.options, dns = "data-" + $.mobile.ns, self = this, persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ); + if ( typeof( listCountPerPage[ parentId ] ) === 'undefined' ) { + listCountPerPage[ parentId ] = -1; + } + parentListId = parentListId || ++listCountPerPage[ parentId ]; + $( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) { var list = $( this ), + listId = list.attr( "id" ) || parentListId + "-" + i, parent = list.parent(), nodeEls = $( list.prevAll().toArray().reverse() ), nodeEls = nodeEls.length ? nodeEls : $( "" + $.trim(parent.contents()[ 0 ].nodeValue) + "" ), title = nodeEls.first().text(),//url limits to first 30 chars of text - id = parentId + "&" + $.mobile.subPageUrlKey + "=" + self._idStringEscape(title + " " + i), + id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId; theme = list.jqmData( "theme" ) || o.theme, countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme, newPage = list.detach() diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js index 15d09e094dd..40cd2622895 100644 --- a/tests/unit/listview/listview_core.js +++ b/tests/unit/listview/listview_core.js @@ -63,8 +63,8 @@ function(){ ok($('#nested-list-test').hasClass('ui-page-active'), "makes nested list test page active"); - ok($(':jqmData(url="nested-list-test&ui-page=More-animals-0")').length == 1, "Adds first UL to the page"); - ok($(':jqmData(url="nested-list-test&ui-page=Groups-of-animals-1")').length == 1, "Adds second nested UL to the page"); + ok($(':jqmData(url="nested-list-test&ui-page=0-0")').length == 1, "Adds first UL to the page"); + ok($(':jqmData(url="nested-list-test&ui-page=0-1")').length == 1, "Adds second nested UL to the page"); start(); } ]); @@ -82,7 +82,7 @@ }, function(){ - var $new_page = $(':jqmData(url="nested-list-test&ui-page=More-animals-0")'); + var $new_page = $(':jqmData(url="nested-list-test&ui-page=0-0")'); ok($new_page.hasClass('ui-page-active'), 'Makes the nested page the active page.'); ok($('.ui-listview', $new_page).find(":contains('Rhumba of rattlesnakes')").length == 1, "The current page should have the proper text in the list."); @@ -95,7 +95,7 @@ asyncTest( "should go back to top level when the back button is clicked", function() { $.testHelper.pageSequence([ function(){ - $.testHelper.openPage("#nested-list-test&ui-page=More-animals-0"); + $.testHelper.openPage("#nested-list-test&ui-page=0-0"); }, function(){ @@ -113,7 +113,7 @@ ok($('#nested-list-test .linebreaknode').text() === "More animals", 'Text should be "More animals"'); }); - asyncTest( "Multiple nested lists on a page", function() { + asyncTest( "Multiple nested lists on a page with same labels", function() { $.testHelper.pageSequence([ function(){ // https://github.com/jquery/jquery-mobile/issues/1617 @@ -121,8 +121,11 @@ }, function(){ + // Click on the link of the third li element $('.ui-page-active li:eq(2) a:eq(0)').click(); - + }, + + function(){ equal($('.ui-page-active .ui-content .ui-listview li').text(), "Sub Item 10Sub Item 11Sub Item 12", 'Text should be "Sub Item 10Sub Item 11Sub Item 12"'); start(); }