I have Jquery Mobile working and have found the best way to get it

Question

0

Asked: June 13, 20262026-06-13T08:48:10+00:00 2026-06-13T08:48:10+00:00

I have Jquery Mobile working and have found the best way to get it

0

I have Jquery Mobile working and have found the best way to get it to work is by including it in the /client/ directory. So, I have the following files in my /client/ directory

jquery.js
jquery-mobile.js
jquery-mobile.css

Then I include this in my index.html

<script type="text/javascript">
   $( document ).bind( "mobileinit", function( event, data ){
        $.mobile.autoInitializePage = false;
   }    
</script>

I tried creating a smart package but then the loading order invalidated jquery plugins for some reason. I tried just using references in the HEAD but that do invalidated jquery plug ins for some reason. The above works, pages transition, views render and I can even use the Meteor auth branch and render subscriptions.

The problem I am having now is when Meteor updates the DOM with data and renders the data it is not rendered with JQM.

For example, if I try to use a JQM Listview to display a Meteor subscription it just formats like a regular un-ordered list .

Here is the template code.

{{#each get_groups}}
    <ul data-role="listview" data-theme="a">
      <li>{{name}}</li>
    </ul>
  {{/each}}

Which just renders as bulleted items. If I use static data like the JQM tuts show it renders fine.

<ul data-role="listview" data-theme="a">
    <li><a href="acura.html">Acura</a></li>
    <li><a href="audi.html">Audi</a></li>
    <li><a href="bmw.html">BMW</a></li>
  </ul>

I am suspect I may need to call some kind of refresh, which means I would have to use observe on the collection subscriptions I imagine.

I am having the same problem with a custom login button. I use a template helper to return the Meteor.user().username and the button doesn’t get formatted by JQM. If I don’t use return the username the button of course renders find through JQM.

I also have the same problem when I try to access the Handlebars current user. If I try to do the following the publicPage will load.

{{#if currentUser}}
   {{>privatePage}}
{{else}}
   {{>publicPage}}
{{/if}}

Once I login the privatePage flickers quickly and then just a white screen. If I remove the references to currentUser then I can login and use the JQM changePage method to load the privatePage.

$.mobile.changePage("#privatePage");

I only have a rough understanding but I believe it is related to how and when JQM formats data for rendering vs. how and when Meteor formats data for rendering.

Does anyone has any ideas on how I might get JQM to behave nicely with Meteor? or if I should even bother and maybe use another mobile front end alongside Meteor?

Thanks
Steeve