{"id":539,"date":"2011-07-12T11:36:45","date_gmt":"2011-07-12T08:36:45","guid":{"rendered":"https:\/\/polyetilen.lt\/?p=539"},"modified":"2023-05-02T11:09:18","modified_gmt":"2023-05-02T08:09:18","slug":"jquery-mobile-listview-error-calling-method-refresh","status":"publish","type":"post","link":"https:\/\/polyetilen.lt\/en\/jquery-mobile-listview-error-calling-method-refresh","title":{"rendered":"JQuery Mobile listview error calling method refresh"},"content":{"rendered":"

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'<\/p>\n

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.<\/p>\n

\r\n<!DOCTYPE html> \r\n<html> \r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">\r\n    <title>ListView Test<\/title>\r\n    \r\n    <link rel="stylesheet" href="..\/css\/jquery.mobile-1.0b1.css" \/>\r\n    \r\n    <script type="text\/javascript" src="..\/js\/jquery-1.6.1.min.js"><\/script>\r\n    <script type="text\/javascript" src="..\/js\/jquery.mobile-1.0b1.min.js"><\/script>\r\n    \r\n    <script type="text\/javascript">\r\n\t\tvar list1 = list2 = '';\r\n\t\tfor(i=0;i<5;i++){\r\n\t\t\tlist1 += '<li><a href="#list" data-icon="arrow-r">item'+i+'<\/a><\/li>';\r\n\t\t\tlist2 += '<li><a href="#index" data-icon="arrow-r">item'+i+'<\/a><\/li>';\r\n\t\t}\r\n\t\t\r\n\t\t$(document).bind("pageshow", function(){\r\n\t\t\tif($("#list1:visible").length){\r\n\t\t\t\t$('#list1').html(list1);\r\n\t\t\t\t$('#list1').listview('refresh');\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tif($("#list2:visible").length){\r\n\t\t\t\t$('#list2').html(list2);\r\n\t\t\t\t$('#list2').listview('refresh');\r\n\t\t\t}\r\n\t\t});\r\n    <\/script>\r\n\r\n<\/head> \r\n<body> \r\n\r\n<div data-role="page" id="index">\r\n\t<div data-role="content">\r\n\t\t<ul data-role="listview" id="list1">\r\n        <\/ul>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<div data-role="page" id="list">\r\n\t<div data-role="content">\r\n\t\t<ul data-role="listview" id="list2">\r\n        <\/ul>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<\/html>\r\n<\/pre>\n
Or attach a handler of list refresh to the page show event.<\/p>\n
\r\n<!DOCTYPE html> \r\n<html> \r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">\r\n    <title>ListView Test<\/title>\r\n    \r\n    <link rel="stylesheet" href="..\/css\/jquery.mobile-1.0b1.css" \/>\r\n    \r\n    <script type="text\/javascript" src="..\/js\/jquery-1.6.1.min.js"><\/script>\r\n    <script type="text\/javascript" src="..\/js\/jquery.mobile-1.0b1.min.js"><\/script>\r\n    \r\n    <script type="text\/javascript">\r\n\t\tvar list1 = list2 = '';\r\n\t\tfor(i=0;i<5;i++){\r\n\t\t\tlist1 += '<li><a href="#list" data-icon="arrow-r">item'+i+'<\/a><\/li>';\r\n\t\t\tlist2 += '<li><a href="#index" data-icon="arrow-r">item'+i+'<\/a><\/li>';\r\n\t\t}\r\n\t\t\r\n\t\t$(document).ready(function(){\r\n\t\t\t$('#index').live('pageshow',function(event){\r\n\t\t\t\t$('#list1').html(list1);\r\n\t\t\t\t$('#list1').listview('refresh');\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t$('#list').live('pageshow',function(event){\r\n\t\t\t\t$('#list2').html(list2);\r\n\t\t\t\t$('#list2').listview('refresh');\r\n\t\t\t});\r\n\t\t});\r\n\t\t\r\n    <\/script>\r\n\r\n<\/head> \r\n<body> \r\n\r\n<div data-role="page" id="index">\r\n\t<div data-role="content">\r\n\t\t<ul data-role="listview" id="list1">\r\n        <\/ul>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<div data-role="page" id="list">\r\n\t<div data-role="content">\r\n\t\t<ul data-role="listview" id="list2">\r\n        <\/ul>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"http:\/\/polyetilen.lt\/?p=205","footnotes":""},"categories":[8],"tags":[167,67,69],"class_list":["post-539","post","type-post","status-publish","format-standard","hentry","category-programavimas","tag-atnaujinimas","tag-jquery-mobile","tag-listview","en-US"],"_links":{"self":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":2,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/539\/revisions"}],"predecessor-version":[{"id":543,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/539\/revisions\/543"}],"wp:attachment":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/media?parent=539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/categories?post=539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/tags?post=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}