andyMatthews.net

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

Buttons

Combobox or select dropdowns

Listviews

Slider control

Toggle switch

Radio buttons

Checkboxes

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

thanks for posting this Andy...it was quite "refreshing" ;) in all seriousness, you saved a few of my hairs from being pulled out.

Steve Withington - December 29, 2011 11:58 am

+1 useful

Ashton - December 29, 2011 09:22 pm

Thanks but some of the examples are tag's properly and JS code does not work with the latest version jQuery Mobile.

Eric - January 25, 2012 03:40 pm

Eric, could you elaborate a little more? All of these examples were pulled from the jQuery Mobile website itself.

andy matthews - February 02, 2012 09:52 pm

Hi Andy, first off let me say thanks for the great demo. I was wondering why some of my form elements weren't refreshing themselves. I have a question though. How would you go about making a dynamic navbar? I have seen a couple examples that user the trigger("create") after they create the nav but I am looking more for a before the page loads kind of solution.

Popcorn 245 - February 04, 2012 01:12 pm

Popcorn...the docs should always be your first stop. Check out the "pagebeforecreate" event. The docs say that this event is "triggered on the page being initialized, before most plugin auto-initialization occurs."

That sounds like just what you're looking for. The good thing is that if you inject your navbar there, you shouldn't have to run any sort of trigger or refresh method.

andy matthews - February 07, 2012 05:52 am

Andy, unfortunately I didn't have much luck with the pagebeforecreate event, so I ended up hard-coding all of the functionality directly in the jqm load function and it works like a charm without having to run the page through needless changePage functions or run page() or trigger(). Thanks for the help.

Popcorn 245 - February 09, 2012 05:20 pm

Great. Just be careful and don't forget that you did it. You'll end up upgrading jQuery and your functionality will stop working. You might be better of overriding jQuery's load function in a custom JS file for that very reason.

andy matthews - February 10, 2012 05:40 am

Greate work....!!!

Ravi - February 17, 2012 01:08 am