JQuery Mobile listview error calling method refresh

Made two pages on JQuery Mobile library, put on every page listview. Lists are dynamically generated. But notice if I call the refresh on the invisible list, an error is returned: Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

A simple solution to update the list is to check with the selector :visible if the listview item is visible. In the example, two dynamic list, on the various pages are updated when the page displayed.

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>ListView Test</title>
    
    <link rel="stylesheet" href="../css/jquery.mobile-1.0b1.css" />
    
    <script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.0b1.min.js"></script>
    
    <script type="text/javascript">
		var list1 = list2 = '';
		for(i=0;i<5;i++){
			list1 += '<li><a href="#list" data-icon="arrow-r">item'+i+'</a></li>';
			list2 += '<li><a href="#index" data-icon="arrow-r">item'+i+'</a></li>';
		}
		
		$(document).bind("pageshow", function(){
			if($("#list1:visible").length){
				$('#list1').html(list1);
				$('#list1').listview('refresh');
			}
			
			if($("#list2:visible").length){
				$('#list2').html(list2);
				$('#list2').listview('refresh');
			}
		});
    </script>

</head> 
<body> 

<div data-role="page" id="index">
	<div data-role="content">
		<ul data-role="listview" id="list1">
        </ul>
	</div>
</div>

<div data-role="page" id="list">
	<div data-role="content">
		<ul data-role="listview" id="list2">
        </ul>
	</div>
</div>

</html>

Or attach a handler of list refresh to the page show event.

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>ListView Test</title>
    
    <link rel="stylesheet" href="../css/jquery.mobile-1.0b1.css" />
    
    <script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.0b1.min.js"></script>
    
    <script type="text/javascript">
		var list1 = list2 = '';
		for(i=0;i<5;i++){
			list1 += '<li><a href="#list" data-icon="arrow-r">item'+i+'</a></li>';
			list2 += '<li><a href="#index" data-icon="arrow-r">item'+i+'</a></li>';
		}
		
		$(document).ready(function(){
			$('#index').live('pageshow',function(event){
				$('#list1').html(list1);
				$('#list1').listview('refresh');
			});
			
			$('#list').live('pageshow',function(event){
				$('#list2').html(list2);
				$('#list2').listview('refresh');
			});
		});
		
    </script>

</head> 
<body> 

<div data-role="page" id="index">
	<div data-role="content">
		<ul data-role="listview" id="list1">
        </ul>
	</div>
</div>

<div data-role="page" id="list">
	<div data-role="content">
		<ul data-role="listview" id="list2">
        </ul>
	</div>
</div>

</html>
This entry was posted in Programming and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.