Backstretch-Rails JS Stopped Working

I successfully got the JS functioning on the index page with the url
provided in the example for the gem. But, the javascript didn't run for
images in my assets folder and it stopped working when I refreshed the
page using the array to add multiple images. I'm using
https://github.com/socialreferral/backstretch-rails

application.js
//= require 'jquery.backstretch'

Here's just a layout of my code

<body>
--Underneath final <Div> --
<script type="text/javascript" src="jquery.backstretch"></script> <=
fires off ActionController::RoutingError (No route matches [GET]
"/jquery.backstretch.js"):

<script>
$(document).ready(function() {
    $.backstretch([
          "<%= image_tag '1.png' %>"
          , "<%= image_tag '2.png' %>"
          , "<%= image_tag '3.png' %>"
        ], {duration: 3000, fade: 750});
});
</script>
</body>

Disclaimer: The console does show Backstretch being loaded. But, the
background only changed once, and that was with the url provided on
their demo.
If you can try to duplicate the problem with a test app. That might give
me a clue and lead to a real solution. Thank you.

Asset pipeline doesn't work like this... check out the Asset pipeline guide. you don't load your jquery libraries this way:

Uh, how about *you* create a test app that demonstrates the issue
and make it available?

Jason Fb wrote in post #1165836:

Asset pipeline doesn't work like this... check out the Asset pipeline
guide. you don't load your jquery libraries this way:

<script type="text/javascript" src="jquery.backstretch"></script> <=

   $.backstretch([
their demo.
To view this discussion on the web visit

https://groups.google.com/d/msgid/rubyonrails-talk/2f68359d4fc6beb52f6f1acbdbb44da8%40ruby-forum.com.

For more options, visit https://groups.google.com/d/optout.

----

Jason Fleetwood-Boldt
tech@datatravels.com
http://www.jasonfleetwoodboldt.com/writing

All material © Jason Fleetwood-Boldt 2014. Public conversations may be
turned into blog posts (original poster information will be made
anonymous). Email jason@datatravels.com with questions/concerns about
this.

I tried to call the js file using <%= javascript_include_tag
"jquery.backstretch" %> But, still it doesn't fire off.

<script type="text/javascript">
    $.backstretch([
        "http://dl.dropbox.com/u/515046/www/outside.jpg"
        , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
        , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
    ], {duration: 3000, fade: 750});
</script>

1) Are you having this problem in development or production?

2) Where did you put the jquery.backstretch.js file

3) you probably don't want to load that file from your layout, you probably want to load the application.js as instructed by the Gem instructions

4) did you read the Asset Pipeline Guide and make sure you have a solid understand of how it works? You appear to not be following the basic guidelines outlined in http://guides.rubyonrails.org/asset_pipeline.html

5) Also I think if you're not targeting below IE 9 you can use the background-size: 100% css property to do what that jQuery plugin does without any javascript at all.

Jason Fb wrote in post #1165839:

3) you probably don't want to load that file from your layout, you
probably want to load the application.js as instructed by the Gem
instructions

Jason Fleetwood-Boldt
tech@datatravels.com
http://www.jasonfleetwoodboldt.com/writing

All material © Jason Fleetwood-Boldt 2014. Public conversations may be
turned into blog posts (original poster information will be made
anonymous). Email jason@datatravels.com with questions/concerns about
this.

I have a question, will placing this function inside of the
application.js override the layout throughout the entire app? Or can I
call the backstretch.js for different pages? I'm really using this gem
just to get the carousel background effect for the index landing page.

The instructions says to bundle install and add //= require statement to
the application.js. Which is what I did. I may use the gem again for
pages other than the index to call backgrounds with one line of code. My
original setup involved using css to cover the entire background with a
fixed image.

After adding it to the application.js file. It changed backgrounds for
the entire application. I wish there was a way to constrain this
function to fire only on the pages that I need to be on

I got it working. I had to remove the require statement from the
application.js and add the file to assets pipeline directly. I also
created a separate javascript file for the home page only. Now, it only
shows on one page!

Generally you make a core set of javascript available site-wide, however you don’t execute the javascript site-wide (so I would move the actually call you make to the jquery plugin into a place where it is executed only on pages you want it executed).

Loading via the asset pipeline in a production, correctly concatenated gzipped, especially if you set up a CDN correctly, isexponentially faster than loading every Javascript library one-by-one in the browser. That’s why the Asset Pipeline was invented.

After adding it to the application.js file. It changed backgrounds for
the entire application. I wish there was a way to constrain this
function to fire only on the pages that I need to be on

There’s lots of ways to do that.

I got it working. I had to remove the require statement from the
application.js and add the file to assets pipeline directly. I also
created a separate javascript file for the home page only. Now, it only
shows on one page!

No this is not the correct way to do it and probably won’t work on your live website. Unless it is very large, I would recommend you loading the jquery file itself on every page but the restricting the Javascript that actually execute that particular method to only the pages you want it to fire on. There are several good patterns for doing that. I explored one of them in this blog post of mine from a few months ago:

http://www.jasonfleetwoodboldt.com/writing/2014/06/04/css-pro-tips/

(See the section "CSS Scoping Pattern #2")

Finally, what you’ve basically done is said, “Instead of learning the Asset Pipeline, I’m just going do re-invent the wheel and do things my own way.”

This strikes me as a behavior pattern that will be challenging for you as to learn more Rails.

I was told that adding the file to the assets.rb precompiler is really
no different than adding it to the application.js

Rails.application.config.assets.precompile += %w(
backstretch-landing-index.js )

Even though this method isn't perfect, I'm still able to control which
views are being effected by the plugin. The original method effected all
controllers. I would have needed to block the script like you said on
all views with the pattern that you're using.

I was told that adding the file to the assets.rb precompiler is really
no different than adding it to the application.js

That is not correct. Who told you that?

Rails.application.config.assets.precompile += %w(
backstretch-landing-index.js )

Even though this method isn't perfect, I'm still able to control which
views are being effected by the plugin. The original method effected all
controllers. I would have needed to block the script like you said on
all views with the pattern that you're using.

It sounds like your app is pretty small. The benefits of the Asset Pipeline are for apps that have much more javascript

Jason Fb wrote in post #1165885: