{"id":3168,"date":"2011-11-18T22:42:01","date_gmt":"2011-11-19T03:42:01","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=3168"},"modified":"2016-03-30T14:47:44","modified_gmt":"2016-03-30T18:47:44","slug":"jquery-mobile-listviewrefresh","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2011\/11\/18\/jquery-mobile-listviewrefresh\/","title":{"rendered":"Refreshing listviews in jQuery Mobile"},"content":{"rendered":"<p>When dynamically creating or updating a <code>list<\/code> in jQuery Mobile; either via AJAX or by other means, one must take care to explicitly invoke the target <a href=\"https:\/\/api.jquerymobile.com\/listview\/\" target=\"_blank\">listview widget<\/a> to <em>&#8220;refresh&#8221;<\/em> in order to instruct the framework to apply the augmented markup and styles to the corresponding elements of the underlying list.<\/p>\n<p>For example, consider the following simplified example which creates an <code>li<\/code> element for each item in an <code>Array<\/code>:<\/p>\n<pre lang=\"JavaScript\">\r\nvar list = \"\",\r\n  items = [{\r\n    name: \"Item A\",\r\n    url: \"\/#item-a\"\r\n  }, {\r\n    name: \"Item B\",\r\n    url: \"\/#item-b\"\r\n  }, {\r\n    name: \"Item C\",\r\n    url: \"\/#item-c\"\r\n  }];\r\n\r\n$.each(items, function(i, item) {\r\n  list += '<li><a href=\"' + item.url + '\">';\r\n  list += item.name;\r\n  list += '<\/a><\/li>';\r\n});\r\n$(\"ul:jqmData(role='listview')\").append(list);\r\n<\/pre>\n<p>While this will create the list items and add them to the target <code>listview<\/code> <code>ul<\/code> element, JQM will not auto enhance the newly added items unless instructed to do so. I imagine this is due to a necessary design decision as, constantly monitoring the DOM for changes would certainly incur a performance hit.<\/p>\n<p>In order to correct this, we just need to invoke <code>.listview(\"refresh\");<\/code> after appending the new elements to the list. This will notify <em>JQM<\/em> to apply the expected enhancements. And so, the following example will result in the expected list enhancements being applied:<\/p>\n<pre lang=\"JavaScript\">\r\nvar list = \"\",\r\n  items = [{\r\n    name: \"Item A\",\r\n    url: \"\/#item-a\"\r\n  }, {\r\n    name: \"Item B\",\r\n    url: \"\/#item-b\"\r\n  }, {\r\n    name: \"Item C\",\r\n    url: \"\/#item-c\"\r\n  }];\r\n\r\n$.each(items, function(i, item) {\r\n  list += '<li><a href=\"' + item.url + '\">';\r\n  list += item.name;\r\n  list += '<\/a><\/li>';\r\n});\r\n$(\"ul:jqmData(role='listview')\").append(list).listview(\"refresh\");\r\n<\/pre>\n<p>You can try an example which demonstrates both of the above implementations <a href=\"http:\/\/code.ericfeminella.com\/articles\/examples\/jqm\/listview\/index.html\" target=\"_blank\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When dynamically creating or updating a list in jQuery Mobile; either via AJAX or by other means, one must take care to explicitly invoke the target listview widget to &#8220;refresh&#8221; in order to instruct the framework to apply the augmented markup and styles to the corresponding elements of the underlying list. For example, consider the following simplified example which creates&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2011\/11\/18\/jquery-mobile-listviewrefresh\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[42,59,78],"tags":[],"class_list":["post-3168","post","type-post","status-publish","format-standard","hentry","category-apis","category-html5","category-javascript-2"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=3168"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3168\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=3168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=3168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=3168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}