Backstretch-Rails JS Stopped Working

rubyonrails-talk
1

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

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.

2

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

3

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

4

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&quot;         , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg&quot;         , "http://dl.dropbox.com/u/515046/www/cheers.jpg&quot;     ], {duration: 3000, fade: 750}); </script>

5

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 The Asset Pipeline — Ruby on Rails Guides

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.

6

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.

7

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

8

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!

9

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.

10

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.

11

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

12

Jason Fb wrote in post #1165885: