CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3jquery-mobileasset-pipeline
raoul_dev
raoul_dev

Reputation: 1461

Rails 3 Asset Pipeline and jQuery Mobile

If I try and include any .js and .css files downloaded from the jQuery Mobile website anywhere in the asset pipeline I get all kinds of view render problems, from not finding images to CSS not being applied, to errors in executing the jQuery js file. However, when I use the example code:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

in the header of my Rails 3.2.11 app it just works.

Why is this?

I tried inclusion into application.js and application.css in a number of ways.

Upvotes: 0

Views: 969

Answers (2)

Vicente Reig
Vicente Reig

Reputation: 927

  1. Add jquery-rails and jquery-mobile to your Gemfile through their corresponding asset gems.
  2. Require their assets from your application.js and application.css or the manifests you've got configured.
  3. Do not include the script tag like that in your layout, otherwise you'd be bypassing the Rails Asset Pipeline.

Your Gemfile:

group :assets, :development do
  gem 'jquery-rails'
  gem 'jquery_mobile_rails'
end

Your asset manifests (application.js and application.css by default) should like like explained at: https://github.com/tscolari/jquery-mobile-rails#installation

Upvotes: 1

raoul_dev
raoul_dev

Reputation: 1461

Ok, so Mr. Vicente's solution is definitely the simplest, BUT it does not allow you to include custom CSS themes using the JQuery Mobile themeroller. What I have done is basically copy the raw CSS and put that into a 'Custom' css file, which in turn styles the provided themes as I want. Not ideal as you want to build custom themes yourself but OK.

Upvotes: 0

Related Questions