Thursday, May 24, 2012    
Home My Books Blog ColdFusion About Me Back    

Calendar
<< Dec 2011 >>
S M T W T F S
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
             

Search

Categories
 • Acrobat (5) [RSS]
 • Adobe (117) [RSS]
 • AdobeMAX06 (45) [RSS]
 • AdobeMAX07 (59) [RSS]
 • AdobeMAX08 (66) [RSS]
 • AdobeMAX09 (39) [RSS]
 • AdobeMAX10 (34) [RSS]
 • AdobeMAX11 (28) [RSS]
 • AdobeMAX13 (1) [RSS]
 • AIR (299) [RSS]
 • Appearances (217) [RSS]
 • Books (86) [RSS]
 • CFEclipse (15) [RSS]
 • Cloud (1) [RSS]
 • ColdFusion (1483) [RSS]
 • ColdFusion Builder (23) [RSS]
 • Data Services (43) [RSS]
 • Fish Tank (5) [RSS]
 • Flash (368) [RSS]
 • Flex (565) [RSS]
 • Home Automation (5) [RSS]
 • HTML5 (36) [RSS]
 • JavaScript (3) [RSS]
 • Jobs (133) [RSS]
 • jQuery (15) [RSS]
 • JRun (14) [RSS]
 • Labs (63) [RSS]
 • LiveCycle (37) [RSS]
 • MAX (285) [RSS]
 • Mobile (257) [RSS]
 • PhoneGap (17) [RSS]
 • Regular Expressions (19) [RSS]
 • RIA (21) [RSS]
 • SQL (45) [RSS]
 • Stuff (554) [RSS]
 • Tips (CF Studio) (80) [RSS]
 • Tips (CF) (795) [RSS]
 • Tips (Dreamweaver) (91) [RSS]
 • Tips (Flex Builder) (2) [RSS]
 • Using CF (167) [RSS]

Other BLOGs
 • Charlie Arehart
 • Lee Brimelow
 • Ray Camden
 • Christophe Coenraets
 • Sean Corfield
 • Mihai Corlan
 • Cornel Creanga
 • Mark Doherty
 • John Dowdell
 • Danny Dura
 • Enrique Duvos
 • Steven Erat
 • Kevin Hoyt
 • Serge Jespers
 • Adam Lehman
 • Duane Nickull
 • Miti Pricope
 • Andrew Shorten
 • Ryan Stewart
 • James Ward
 • Greg Wilson
 • Full As A Goog

RSS Feeds
 • Feed
 • Subscribe

Join my mailing list and find out about new books and other topics of interest.

Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.

Viewing By Entry / Main
December 12, 2011

jQuery Mobile Control Refresh Gotcha

jQuery lets you manually manipulate controls like lists. For example, you can do something like this to add an item to a list:

$('#myList').append('<li>Some text</li>');

In jQuery Mobile, if you manually update lists like that, then when you are done you must force the list to refresh so that formatting and styles are applied. To do this, just use:

$('#myList').listview('refresh');

But, there is one gotcha you should be aware of. jQuery Mobile apps are usually comprised of pages, each defined with a <div data-role="page">, and often with multiple in the same .html file. jQuery (and thus jQuery Mobile) lets you manipulate any controls in your page, so you can append or change controls in a page not currently being displayed. But, the .listview('refresh') call? That will only work if the control is on the currently displayed page. If you try to .listview('refresh') a control on a page that is not displayed, you'll see this error:

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

So, if you do need to update controls on a not currently displayed page, remember to load that page before triggering the refresh.

Related Blog Entries

Comments
Hi Ben,
This is one question that always comes up at the JQM forum so its good to see it spelled out, one thing I would mention though is that while you can have multiple pages in an HTML (multi page template)

JQM recommends to use the single page template as it is cleaner and more lightweight.

I know its a little nit picky but I think its important to point out because programs like DW 5.5 give you the basic template that has the page ID's in it and while it works to do it that way I think its setting developers up to create a web app outside of the recommended method of JQM.

Anyhow great post!
# Posted By Mike | 12/15/11 12:25 PM
Genius!
# Posted By Ivan R. | 2/29/12 12:57 AM

  © Copyright 1997-2009 Ben Forta, All Rights Reserved