JQuery Mobile listview metodo refresh klaida

Sukūriau du puslapius su JQuery Mobile biblioteka, pridėjau kiekviename puslapyje sąrašą listview. Sąrašai yra dinamiškai generuojami. Tačiau pastebėjau, jei bandyti atnaujinti nematomą sąrašą su refresh metodu bus klaida: Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

Paprastas sprendimas prieš atnaujinant sąrašą patikrinti su selektoriumi :visible, ar sąrašo elementas matomas. Šiame pavyzdyje du puslapiai ir kiekvienas su dinaminiu sąrašu, kuris atnaujinamas kai puslapis pasirodo.

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

Arba priskirti sąrašo atnaujinimą puslapiui, kai jis pasirodo.

<!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>
Šis įrašas buvo paskelbtas kategorijoje Programavimas su žyma , , . Įrašykite į adresyną nuolatinę nuorodą.

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *