JQuery Mobile listview ошибка вызова метода refresh

Сделал две страницы на JQuery Mobile библиотеке, поместил на каждой странице по списку listview. Списки генерируются динамически. Но заметил если вызывать метод refresh на невидимом списке то возвращается ошибка: Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

Простое решение перед обновлением списка проверять с селектором :visible видимый ли элемент списка. В примере два динамических списка, на разных страницах обновляются когда показывается страница.

<!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>

Или обновлять отдельно каждый список, когда страница со списком будет показана.

<!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>
Запись опубликована в рубрике Программирование с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт защищен политикой конфиденциальности и условиями использования reCAPTCHA и Google.