Merge pull request jquery-archive#1781 from gseguin/nested-lists

jblas · jblas · commit c88f5fc25148 · 2011-06-03T10:58:43.000-07:00
Nested lists id generation
diff --git 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 : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
 				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
@@ -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,16 +113,19 @@
 		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
 				$.testHelper.openPage("#nested-lists-test");
 			},
 
 			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();
 			}
