15

I'm impressed by Meteor and would like to use it with jQuery-Mobile. I'd like to know if somebody has already built a sample integration app. If not, some guidelines would be great.

Regards,

Cédric

Cédric Vidal
  • 153
  • 1
  • 5
  • 6
    I'm interested in this too and have been attempting to integrate it. jQuery Mobile initializes the page and modifies the DOM on load. Then meteor initializes and adds it's own html to the DOM and these conflict. Setting `$.mobile.autoInitializePage = false;` inside the `mobileinit` event should keep that from happening. That's as far as I've gotten. Will update with an answer if/when I come up with a complete sample/guide. – rmarscher Apr 22 '12 at 19:29
  • 2
    Simply put jquery.js and jquery-mobile.js in the /client directory for example. That way they are loaded later than other scripts. Do not use jquery from package. I tried the packaging jquery-mobile suggested in the other answer but I had more trouble because of Meteor's javascript loading order. – Kenji Noguchi Jul 07 '12 at 02:16

3 Answers3

6

I was wondering about this as well so I made a sample app:

http://jqmdemo.meteor.com/

And it seems to work well. You can find the source code here:

https://github.com/snez/jqm-meteor

There are a few gotchas when using the two together, see the comments in the code.

UPDATE: It looks like meteor.com is rolling upgrades to the meteor framework breaking old code there. Use this project as a reference only as there are better ways to do the same thing with the newer framework versions.

Aswin Kumar K P
  • 1,023
  • 2
  • 12
  • 21
snez
  • 2,400
  • 23
  • 20
  • This app doesn't work. I get `update failed: Access denied`. As a result I cannot verify that this actually solves the problem mentioned by @rmarscher: if you have two browsers open, and modify the values on one, meteor will update the html and clobber the jQuery mobile changes. – jchook Jun 24 '13 at 03:20
  • For info, an updated, working version of the demo is available at http://jqmdemo.meteor.com/ – Andy Lorenz Jul 18 '15 at 17:10
4

I wasn't able to get jQuery Mobile to work initially when I tried to bundle the framework files in the clients directory. Meteor was throwing an error on JS files that were attempting to set the DOCTYPE, even files in the examples folder which were never referenced. By using the CDN-hosted version and disabling autoInitializePage as mentioned in a comment above, I got it to work without accessing any undocumented APIs.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
     $( document ).bind( "mobileinit", function( event, data ){
          $.mobile.autoInitializePage = false;
     });    
</script>
Nate
  • 18,752
  • 8
  • 48
  • 54
ashack
  • 1,192
  • 11
  • 17
3

I suggest taking a look at the jQuery package in the /packages/jquery folder.

All this does is add in the jquery.js file into the stack of files to get sent to the client. If you are after this you could add your own package called jquery-mobile and include the files it needs.

See the package.js file for how it works:

https://github.com/meteor/meteor/blob/master/packages/jquery/package.js

So just add the mobile files into your jquery-mobile package and do something like:

Package.on_use(function (api) {
  api.add_files('jquery.mobile-1.1.0.min.css', 'client');
  api.add_files('jquery.mobile-1.1.0.min.js', 'client');
});
jonathanKingston
  • 1,418
  • 10
  • 16
  • Oh and then include it in your app by using "Meteor add" or add to the .meteor/packages file in your application directory – jonathanKingston Apr 13 '12 at 15:51
  • Also if you read the reply from N1mmy one of the developers of Meteor he suggests the API will change: http://stackoverflow.com/questions/10114526/how-to-build-a-meteor-package So I might suggest just including the files locally in a js file into your template instead. – jonathanKingston Apr 13 '12 at 16:41