Refreshing jQuery Mobile listviews, buttons, select dropdowns, and input fields

jQuery Mobile is an excellent framework for mobile development and you probably already know how much I love working with it. That's not to say that it doesn't have it's problems. A big pain point that many developers run into happens the minute they try to use code to add, update, or remove elements from a page using JavaScript. In this blog post I've compiled a list of jQuery Mobile widgets and the ways that you can refresh them after programmatic changes are made.

There's generally two reasons you'd ever want to refresh an element on the page. First reason is if you're adding something to the page that wasn't already there. A good example of this is a new button, or an additional checkbox. The second reason is when you make a change to an existing element: changing the selected item in a combobox, or the checked item in a radio button series. Regardless of the reason, jQuery Mobile provides a fairly consistent means by which to reload each sort of element as you can see from the list below. I've tried to provide a chunk of HTML where it might help the example.

Textarea fields

Text input fields


Combobox or select dropdowns


Slider control

Toggle switch

Radio buttons