Languages

Menu
Sites
Language
Virtual List + Popup listview TAU

Hello to Community!
I was trying to make virtual list inside of popup listview and  get an error - lib/tau/mobile/js/tau.js (30606) :TypeError: 'null' is not an object (evaluating 'scrollview.element')
Couldn't fix it so far.  Maybe someone already knows: is it actually possible, to put virtual list inside popup? Or virtual list needs some ui-page components? 

 

List

Responses

4 Replies
Iqbal Hossain

hi~ 

I have done it with the help of TAUUIMobileComponent sample app. I have used normal virtual list and included it on list popup. 

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../lib/tau/mobile/theme/default/tau.css">
	<link rel="stylesheet" href="../../css/style.css">
	<script type="text/javascript" src="../../lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
</head>
<body>
<div data-role="page" class="ui-page virtuallist_demo_page" id="virtuallist-normal_1line">
    <div class="ui-header" data-position="fixed">
        <h1>Popup</h1>
    </div>
    <div class="ui-content">
        <ul class="ui-listview">
            <li class="ui-li-anchor"><a  href="#2line_title_listview_popup" data-inline="true" data-rel="popup" data-position-to="window">2line title List popup</a></li>
        </ul>

	<div id="2line_title_listview_popup" class="ui-popup ui-popup-listview">
        <div class="ui-popup-header popup-2line-title">
		<h1>Virtual List</h1>
		<h2>on Popup</h2>
	    </div>
            <div class="ui-popup-content">
             <ul id="virtuallist-normal_1line_ul"></ul>
            </div>
             <!-- sample list for virtual list -->
		    <script id="tmp-li-1line" type="text">
   			     <span class="ui-li-text-main">${NAME}</span>
   			</script>
		
		    <script>
		        var pageId = "virtuallist-normal_1line",
		            listId = "virtuallist-normal_1line_ul",
		            templateId = "tmp-li-1line",
		            itemClass = ["ui-li-static"];
		    </script>
		    <script src="virtuallist-db-demo.js"></script>
		    <script src="virtuallist.js"></script>
		    <link rel="stylesheet" href="virtuallist.css">
            <div class="ui-popup-footer">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

css

#virtuallist-normal_1line_ul li .ui-li-text-main {
    max-width:95%;
    display:inline-block;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

virtuallist.js

/*global pageId, listId, templateId, itemClass, tau, JSON_DATA */
(function(pageId, listId, templateId, itemClass) {
    var page = document.getElementById(pageId),
		vlist;

	/**
	 * pageshow event handler
	 * Do preparatory works and adds event listeners
	 */
	page.addEventListener("pageshow", function() {
		/* Get HTML element reference */
		var elList = document.getElementById(listId);

		vlist = tau.widget.VirtualListview(elList, {
			dataLength: JSON_DATA.length,
			bufferSize: 40
		});
		/* Update list items */
		vlist.setListItemUpdater( function (listElement, newIndex) {
			var data = JSON_DATA[newIndex],
				template = document.getElementById(templateId).innerHTML;

			/*jslint unparam: true*/
			template = template.replace(/\$\{([\w]+)\}/ig, function (pattern, field) {
				return data[field];
			});
			/*jslint unparam: false*/

			listElement.innerHTML = template;
			if (itemClass.length) {
				itemClass.forEach(function(value) {
					listElement.classList.add(value);
				});
			} else {
				listElement.classList.add(itemClass);
			}
		});

		// Draw child elements
		vlist.draw();
	});

	/**
	 * pagehide event handler
	 * Destroys and removes event listeners
	 */
	tau.event.one(page, "pagehide", function () {
		// Remove all children in the vlist
		vlist.destroy();
	});
}(pageId, listId, templateId, itemClass));

virtuallist-db-demo.js

var JSON_DATA = [
{NAME:"Abdelnaby, Alaa", ACTIVE:"1990 - 1994", FROM:"College - Duke", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abdul-Aziz, Zaid", ACTIVE:"1968 - 1977", FROM:"College - Iowa State", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abdul-Jabbar, Kareem", ACTIVE:"1969 - 1988", FROM:"College - UCLA", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abdul-Rauf, Mahmoud", ACTIVE:"1990 - 2000", FROM:"College - Louisiana State", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abdul-Wahad, Tariq", ACTIVE:"1997 - 2002", FROM:"College - San Jose State", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abdur-Rahim, Shareef", ACTIVE:"2007 - 2007", FROM:"College - California", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abernethy, Tom", ACTIVE:"1976 - 1980", FROM:"College - Indiana", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Able, Forest Edward (Frosty)", ACTIVE:"1956 - 1956", FROM:"College - Western Kentucky; Louisville", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Abramovic, John Jr. (Brooms)", ACTIVE:"1946 - 1947", FROM:"College - Salem (NC)", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Acker, Alex", ACTIVE:"2005 - 2008", FROM:"College - Pepperdine", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Ackerman, Donald D. (Buddy)", ACTIVE:"1953 - 1953", FROM:"College - Long Island University", TEAM_LOGO:"../test/raw.jpg"},
{NAME:"Acres, Mark", ACTIVE:"1987 - 1992", FROM:"College - Oral Roberts", TEAM_LOGO:"../test/raw.jpg"}
]

Demo:

darina r

 Hello, Iqbal. I'll try - It's really works with TAUComponent sample app. So i just need to find out where was the mistake in my sample. Thank you, now it's much easier.

 Have a nice day!

Iqbal Hossain

Then give your code here to find where your error were ! 

darina r

For the moment page looks almost like this:
 

<!DOCTYPE html>
<html>
    
	<head>
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css" />
		<title>Weather Sample TAU</title>
		<script type="text/javascript" src="/lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
	</head>
	
	<body>
		<div class="ui-page" id="my-page-id">
			
			<div class="ui-content">
				 		
				<!-- Some elements here -->		
						
				<div id="listview_popup" class="ui-popup ui-popup-listview">
					<div class="ui-popup-header">Popup Header</div>
					<div class="ui-popup-content">
						<ul id="my-list"></ul>
					</div>
					
					<script id="template" type="text">
						<span class="ui-li-text-main">${NAME}</span>
					</script>
				
					<script>
						var pageId = "my-page-id",
						listId = "my-list",
						templateId = "template",
						itemClass = ["ui-li-static"];
					</script>
				
					<script src="/js/my-db-test.js"></script>
					<script src="/js/virtuallist.js"></script>
					<div class="ui-popup-footer">
						<a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
					</div>
				
				</div>
			
			
			</div>
			<!-- /content -->
			
			<div class="ui-footer" data-position="fixed">
				<button id="my-btn-id">Open popup vlist</button>
			</div>
		
			<script src="/js/main.js"></script>
		</div>
		<!-- /page -->
	
	
	</body>
	</html>


Virtual list - the same, taken from sample.
It works, when i make list just in plane page,  inside popup - don't .
Thought the mistake was, because I connected external scripts outside popup - before page-div closing tag. Tryied it - fail. 
Console says: lib/tau/mobile/js/tau.js (30606) :TypeError: 'null' is not an object (evaluating 'scrollview.element'), mistake dissaper only if remove 

<script src="/js/virtuallist.js"></script>

probably, there are an easy childish mistake in my code :) Just need time to get where it is hiding. 

Thank you for help!