Bootstrap issues with RoR

[xsc...@gmail.com]

I added bootstrap-sass to my Gemfile, did bundle install, added "@import bootstrap" to my css file. Yet, bootstrap does;t work. Safari fails silently, Mozila says:

   The stylesheet http://localhost:3000/assets/bootstrap was not loaded because its MIME type, "application/javascript", is not "text/css". 

Hmm, so I changed the @import to @import bootstrap.css. Some things seems to work, but others (carousel, for example) don't. Here's one error:

    TypeError: ".carousel".carousel is not a function 

Something seems to be fundamentally wrong with the install, but I'm stumped.

Any ideas?

Thanks,

Per

[Javier Quarite]

On Wed, Jan 23, 2013 at 12:18 AM, xsc...@gmail.com <xsc...@gmail.com> wrote:

I added bootstrap-sass to my Gemfile, did bundle install, added "@import bootstrap" to my css file. Yet, bootstrap does;t work. Safari fails silently, Mozila says:

   The stylesheet http://localhost:3000/assets/bootstrap was not loaded because its MIME type, "application/javascript", is not "text/css". 

That's weird, maybe you can use twitter-bootstrap-rails as show in here

http://railscasts.com/episodes/328-twitter-bootstrap-basics

----------------------

Javier

[xsc...@gmail.com]

Ok! We're making progress! Adding that line made more stuff work. Now - just one last quirk: 

// DOES NOT WORK. Mozilla says: carousel is not a function

<script>

  $(document).ready(function(){

     ('.carousel').carousel();

});

</script>

// This works - 

<script>

  $(document).ready(function(){

     jQuery('.carousel').carousel();

});

</script>

Why is the jQuery needed?

On Wednesday, January 23, 2013 12:43:00 AM UTC-8, Mārtiņš Poļakovs wrote:

In order for carousel to work you need to include bootstrap javascript files.

In your application.js file put

//= require bootstrap

[Mārtiņš Poļakovs]

In your first <script> you have an error. You should put $ in front of ('.carousel').carousel(), like this: $('.carousel').carousel();
in jQuery "$" is an alias for "jQuery", these two lines will do the same thing:
1) $('.carousel').carousel();

2) jQuery('.carousel').carousel();

Usually in jQuery you will use only $. But if you have other javascript framework included in page which has a special meaning for $, then you should use "jQuery." instead of "$." to avoid conflicts with the other framework.


Martin