Tuesday, August 13, 2013

Loading jQuery Mobile in a dynamic environment

I was writing an RSS feed application on PhoneGap powered by jQuery Mobile. I used the default accordion provided by jQM and it worked out well.

However, I encountered a problem that the style wasn't getting applied when the number of accordion isn't known during page load time. The styles weren't applied to the dynamic elements. Here are some of the highlights of the problem I was facing:


  • It is a simple RSS feed reader application.
  • The number of elements (RSS news items) are not known beforehand.
  • The feed is read and parsed into the page only after the page gets loaded.
  • The feed items have got no styles at all, as the jQM has already loaded and set the styles for all the static elements and the dynamic elements do not get their styles set by jQM.
Thus, the solution was that I had to somehow 'refresh' jQM alone so that the styles got applied after all the dynamic content is loaded. You need to refresh the DIV that has the dynamic content once it is loaded. 

Assuming your dynamic content is appended to this node:

<div id="loaded-content" data-role="collapsible-set"></div> 

you have to do:

$('.loaded-content').collapsibleset('refresh');


Thus, you now have the dynamic content's styles and behavior using jQuery Mobile. Is there a better way to do this? Do let me know!

No comments:

Post a Comment