2

I'm working on a Meteor project at the moment that utilises Meteor JS & jQuery Mobile. All is going well apart from certain circumstances where Meteor updates an element.

For example, JQM automagically adds a few surrounding divs to a select box for formatting purposes (.ui-select, .ui-btn, .ui-shadow, etc.) but when Meteor updates this element, whether from a remote or local db change, it reverts the element to a standard select box, in effect ruining the UI.

I was just wondering if there is a easy solution to this issue where Meteor calls on jQuery to make changes prior to updating the element?

Stedy
  • 7,359
  • 14
  • 57
  • 77
Ian Belcher
  • 5,583
  • 2
  • 34
  • 43

1 Answers1

2

Dynamically added jQuery Mobile content must be enhanced.

It can be done in few ways, but most common ones are:

  1. In case you want to enhance only content

    $('#page-id').trigger('create');

  2. In case you want to enhance full page (content + header + footer)

    $('#page-id').trigger('pagecreate');

It is good to know that these method are performance extensive so you can always enhance widgets (buttons, listviews ...) separately. To find out more take a look at my other ARTICLE, to be transparent it is my personal blog, or find it HERE.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • I've stumbled across this when looking for a solution to refreshing JQM listviews so that the styles are reapplied. Within meteor, I need to wait for listview to render and be visible before I can refresh and `Meteor.template.rendered` is not late enough (listview has no li's yet). Do you know where I can do that from within Meteor? The only solution I've found to date is to use `Meteor.timeout()` and wait about 200ms for it populate the listview's li's, then I can refresh. Any ideas for an event driven solution? – occasl Apr 23 '14 at 17:40