Am I having an asset problem?

I am running Rails 3.1.2

I don't know if I'm having a Rails problem, an asset problem, or a javascript problem.

I find the following is in the source of a rendered page:

    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
    <script src="/assets/ZeroClipboard.js?body=1" type="text/javascript"></script>
    <script src="/assets/accordion.js?body=1" type="text/javascript"></script>
    <script src="/assets/build_batches.js?body=1" type="text/javascript"></script>

    <script src="/assets/builder.js?body=1" type="text/javascript"></script>
    <script src="/assets/controls.js?body=1" type="text/javascript"></script>
    <script src="/assets/dragdrop.js?body=1" type="text/javascript"></script>
    <script src="/assets/effects.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery-scrollTo.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery-ui-accordion.js?body=1" type="text/javascript"></script>

    <script src="/assets/jrails.js?body=1" type="text/javascript"></script>
    <script src="/assets/prototype.js?body=1" type="text/javascript"></script>
    <script src="/assets/rails.js?body=1" type="text/javascript"></script>
    <script src="/assets/row0_in__table_in_tableWrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/scriptaculous.js?body=1" type="text/javascript"></script>
    <script src="/assets/slider.js?body=1" type="text/javascript"></script>

    <script src="/assets/sound.js?body=1" type="text/javascript"></script>
    <script src="/assets/swfobject.js?body=1" type="text/javascript"></script>
    <script src="/assets/unittest.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    <script src="/assets/effects.js?body=1" type="text/javascript"></script>
    <script src="/assets/controls.js?body=1" type="text/javascript"></script>

    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/row0_in__table_in_tableWrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/common/shnHelpers.js?body=1" type="text/javascript"></script>
    <script src="/assets/common/dotimeout.js?body=1" type="text/javascript"></script>

As you can see, the scripts (Why aren't they inlined?) are in partial alphabetical order. This is not the order I have my javascript_include_tags in and this is causing problems.

Can someone tell me what I'm doing wrong and/or suggest a solution?

Ralph Shnelvar

They are not compressed because you have “config.assets.debug = true”

Kind of strange though that they are in the wrong order. What does your javascript_include_tag look like, and what do the files it’s calling look like?

Re: [Rails] Re: Am I having an asset problem?
Thursday, December 29, 2011, 12:32:32 PM, you wrote:

They are not compressed because you have “config.assets.debug = true”

Kind of strange though that they are in the wrong order. What does your javascript_include_tag look like, and what do the files it’s calling look like?

Here is part of the relevant code in application.html.haml

%html{ “xml:lang” => i18n_locale, :lang => i18n_locale, :xmlns => “http://www.w3.org/1999/xhtml” }

%head

%title

= h(yield(:title) || shnI18n.t(“meta title”))

%meta{ :name => “Keywords”, :content => “UltraDedup, VM, VMWare, deduplication, compression, deduplicate, Deduplicates , backups, backup, back up, free, scripting, video, tutorials, flash” }

%meta{ :content => “text/html; charset=UTF-8”, “http-equiv” => “Content-Type” }

%meta{ “http-equiv” => “X-UA-Compatible”, “content” => “IE=edge” }

  • meta_description_content = h(yield(:meta) || shnI18n.t( “meta description”))

%meta{ ‘name’ => “description”, “content” => meta_description_content }

  • meta_flashMovie = h(yield(:meta_flashMovie) || “”)

  • unless meta_flashMovie.to_s == “”

  • puts “#{FILE} @ #{LINE}”

  • puts meta_flashMovie.class

  • puts meta_flashMovie

= stylesheet_link_tag ‘application’

  • puts “#{FILE} @ #{LINE}”

= javascript_include_tag ‘application.js’

= javascript_include_tag ‘effects.js’

= javascript_include_tag ‘controls.js’

= javascript_include_tag ‘jquery.js’

= javascript_include_tag ‘row0_in__table_in_tableWrap.js’

= javascript_include_tag ‘shnHelpers.js’

= javascript_include_tag ‘dotimeout.js’

%link{‘rel’ => “shortcut icon”, ‘href’ => “/images/UltraDedup-icon-003—16x16.ico”, ‘type’ => “image/x-icon”}

= yield(:head)

%body

Note that effects.js appears before controls.js in the code above.

What is doubly strange is tat sound.js and unittest.js was never explicitly included in a javascript_include_tag statement. I think the assets manager is taking all the .js file it finds and includes them implicitly.

To repeat, the rendered html shows controls.js appears before effects.js.

Thursday, December 29, 2011, 12:32:32 PM, you wrote:

They are not compressed because you have "config.assets.debug = true"

Kind of strange though that they are in the wrong order. What does your javascript_include_tag look like, and what do the files it's calling look like?

Here is part of the relevant code in application.html.haml

%html{ "xml:lang" => i18n_locale, :lang => i18n_locale, :xmlns => "http://www.w3.org/1999/xhtml" }
  %head
    %title
      = h(yield(:title) || shnI18n.t("meta title"))
    %meta{ :name => "Keywords", :content => "UltraDedup, VM, VMWare, deduplication, compression, deduplicate, Deduplicates , backups, backup, back up, free, scripting, video, tutorials, flash" }
    %meta{ :content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }
    %meta{ "http-equiv" => "X-UA-Compatible", "content" => "IE=edge" }
    - meta_description_content = h(yield(:meta) || shnI18n.t( "meta description"))
    %meta{ 'name' => "description", "content" => meta_description_content }
    - meta_flashMovie = h(yield(:meta_flashMovie) || "")
    - unless meta_flashMovie.to_s == ""
      - puts "#{__FILE__} @ #{__LINE__}"
      - puts meta_flashMovie.class
      - puts meta_flashMovie
      <meta #{meta_flashMovie} />
    = stylesheet_link_tag 'application'
    - puts "#{__FILE__} @ #{__LINE__}"
    = javascript_include_tag 'application.js'
    = javascript_include_tag 'effects.js'
    = javascript_include_tag 'controls.js'
    = javascript_include_tag 'jquery.js'
    = javascript_include_tag 'row0_in__table_in_tableWrap.js'
    = javascript_include_tag 'shnHelpers.js'
    = javascript_include_tag 'dotimeout.js'
    %link{'rel' => "shortcut icon", 'href' => "/images/UltraDedup-icon-003---16x16.ico", 'type' => "image/x-icon"}
    = yield(:head)
  %body

Note that effects.js appears before controls.js in the code above.

What is doubly strange is tat sound.js and unittest.js was never explicitly included in a javascript_include_tag statement. I think the assets manager is taking all the .js file it finds and includes them implicitly.

To repeat, the rendered html shows controls.js appears before effects.js.

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/ZeroClipboard.js?body=1" type="text/javascript"></script>
<script src="/assets/accordion.js?body=1" type="text/javascript"></script>
<script src="/assets/build_batches.js?body=1" type="text/javascript"></script>

<script src="/assets/builder.js?body=1" type="text/javascript"></script>
<script src="/assets/controls.js?body=1" type="text/javascript"></script>
<script src="/assets/dragdrop.js?body=1" type="text/javascript"></script>
<script src="/assets/effects.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-scrollTo.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-accordion.js?body=1" type="text/javascript"></script>

<script src="/assets/jrails.js?body=1" type="text/javascript"></script>
<script src="/assets/prototype.js?body=1" type="text/javascript"></script>
<script src="/assets/rails.js?body=1" type="text/javascript"></script>
<script src="/assets/row0_in__table_in_tableWrap.js?body=1" type="text/javascript"></script>
<script src="/assets/scriptaculous.js?body=1" type="text/javascript"></script>
<script src="/assets/slider.js?body=1" type="text/javascript"></script>

<script src="/assets/sound.js?body=1" type="text/javascript"></script>
<script src="/assets/swfobject.js?body=1" type="text/javascript"></script>
<script src="/assets/unittest.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/effects.js?body=1" type="text/javascript"></script>
<script src="/assets/controls.js?body=1" type="text/javascript"></script>

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/row0_in__table_in_tableWrap.js?body=1" type="text/javascript"></script>
<script src="/assets/common/shnHelpers.js?body=1" type="text/javascript"></script>
<script src="/assets/common/dotimeout.js?body=1" type="text/javascript"></script>

the problem is that you are using require_tree in your application.js file. Instead, require the files individually like so:

// This is a manifest file that’ll be compiled into including all the files listed below.

// Add new JavaScript/Coffee code in separate files in this directory and they’ll automatically

// be included in the compiled file accessible from http://example.com/assets/application.js

// It’s not advisable to add code directly here, but if you do, it’ll appear at the bottom of the

// the compiled file.

//

//= require jquery_ujs

//= require external/json2

//= require external/jquery.url

//= requrie external/jquery.mousewheel

//= require external/jquery.jscrollpane

Thursday, December 29, 2011, 4:26:30 PM, you wrote:

Thursday, December 29, 2011, 4:26:30 PM, you wrote:

> ----
> I gather that including 'application.js' in your template is what causes all the files in app/assets/javascripts to be loaded in alphabetic order - at least, that was my conclusion but I think
> that was with Rails 3.1.1 and now I am on 3.1.3 and it seems to do the same... also the css files in app/assets/stylesheets which forced me to rename my main css file to zlayout.css

> I rather like the ability to have snippets of javascript and css in separate files while in development mode as that allows portability but the alphabetic loading threw me for a while and I finally figured out that at least the order is predictable (which is important with css)

> It would seem if you want to manhandle the load order of scripts in assets then you probably should not include application.js and include those you specifically want in your layout but then you
> are going to have make manual adjustments when it comes to deploying (as opposed to simply executing 'bundle exec rake assets:precompile')

> Craig

Thank you.

Now that I know someone else is seeing this crazy behavior, I'll dig into the code and see if I can turn it off and have it act reasonably.

Thursday, December 29, 2011, 8:54:05 PM, you wrote: