Question

I am using Rails 3.1 with assets pipeline. However I have a very weird problem.

My application.html.haml is:

!!! 5
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
    %head
        = stylesheet_link_tag 'bootstrap', 'application'
        = yield :css
        %title BizPlug
        %meta{:content => 'text/html; charset=utf-8', 'http-equiv' => 'Content-Type'}
        = csrf_meta_tags
        = javascript_include_tag 'application'
        = yield :js 

In my view, I try to use content_for to dynamically load js file which looks like:

- content_for :css do
    = javascript_include_tag 'jquery.fancybox'
- content_for :js do
    = javascript_include_tag 'jquery.fancybox'  

.edit-panel
    %p.text_actions
        = link_to "Publish", publish_policy_draft_path(@policy_draft), :disable_with => 'Processing...', :method => 'PUT', :class => "primary btn"
        = link_to "Delete", policy_draft_path, :method => 'Delete', :confirm => 'Are you sure', :class => 'btn danger'
        = link_to "Close", policy_drafts_path, :class => 'btn'

However when I check the source code from browser, it gives me

<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/compositions.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/base.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/simple.css?body=1" media="screen" rel="stylesheet" type="text/css" />   
<script src="/assets/jquery.fancybox?body=1" type="text/javascript"></script>

    <title>BizPlug</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <script src="/assets/jquery.min.js?body=1" type="text/javascript"></script>

I am wondering why the jquery.fancybox.js would be above of the application.js?

Answer 1

Well, if what you copied and pasted is correct, then you have a JavaScript include tag going into your content_for :css block. That’s why the fancybox stuff is being required before application.js.