Ben Forta | Blog

Blog posts made on 12-Dec-11

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

view plain print about

1$('#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:

view plain print about

1$('#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:

view plain print about

1Uncaught 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.