I'm trying to recreate this demo in my own Rails project:
http://ihatetomatoes.net/demos/parallax-scroll-effect/
Files are here: http://ihatetomatoes.net/demos/parallax-scroll-effect-1302.zip
But it only shows the last slide and not scrollable. I suspect there's something wrong with loading the js files in Rails but I'm not entirely sure.
Here is my repo: https://github.com/tihuan/parallaxtest. You can clone it and run rails s to see that it's broken.
*Note that you can remove requiring js files from Welcome#index.html.erb since I already added them in application.js!
** Current application.js loading order:
//= require js/vendor/jquery-1.9.1.min
//= require js/vendor/modernizr-2.7.1.min
//= require js/skrollr
//= require js/imagesloaded
//= require js/_main
//= require_tree .
Please help!
It might be thaat your not loading the scripts in the right way, check modernizr config and how you need to load it into the app
<html>
<head>
<title>Your Awesome App</title>
<%= stylesheet_link_tag :application, media: :all %>
<%= javascript_include_tag :modernizr %>
<%= csrf_meta_tags %>
</head>
<body>
...
<%= javascript_include_tag :application %>
</body>
</html>`
Related
I'm new to rails and I am trying to get a website up using start bootstrap, specifically the landing page found here. I have imported the css and html into my rails project, but I am having a hard time with the javascript. The script file is in app/my_app/javascript/packs. They stylings go in app/assets/stylesheets and I can successfully reference the images contained in them using <img src> assets/stylesheets/...</img src>. I boot up the server with rails s and it loads up in my browser with the relevant style and images albeit without any javascript. The specific error in the console reads
localhost/:468 GET http://localhost:3000/packs/scripts.js 404 (Not Found)
I reference the script at the very bottom of my index.html.erb page like so
<script src> packs/scripts.js </script>. I have also tried javascript/packs/scripts.js
My applications.html.erb looks like this
<html>
<head>
<title>TestApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
The <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> tag only appears once and in only that file.
My applications.js file is this
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require scripts
//= require jquery_ujs
//= require turbolinks
//= require_tree
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("packs/scripts")
So rails/webpacker can't seem to find the script under the javascript/... path, and I don't know why. I have scoured and tried alot of solutions but all to no avail. Any help or suggestions on the issue would be supremely appreciated. Thank you
If you have a script.js from Webpacker that you want to load in Rails, you can load it using <%= javascript_pack_tag 'scripts', 'data-turbolinks-track': 'reload' %>.
javascript_pack_tag is a helper method that will automatically generate script tag and url for you.
Additionally, because you're using turbolinks and have added 'data-turbolinks-track': 'reload', you can place the javascript_pack_tag in your <head>.
I am still a newbie at Ruby on Rails. This framework has been really amazing for me. However, since I uploaded it into the production, I still do not understand why Ruby on Rails 5.2.3 on some random occasion does not load JavaScript properly. Sometimes it loads properly at the first try on opening the page, but when it does not, user has to refresh even sometimes several times until it is loaded properly. Also I get error from the browser where it says
GET .../assets/jquery-ui-1.8.16.custom.css net::ERR_ABORTED 500
when I did not in any way import or even writes a single line of code to import that file since I used the JQuery UI 1.12.1 loaded from CDN.
What is really important is, why Ruby on Rails 5.2.3 on some random
occasions does not load the JavaScript properly?
Not only does it happen on production mode, also on the development mode this problem occurs on random ocassions as well.
I will post the application.js and application.scss and also the head part of the application.html.erb to give the insights of what I am doing wrong in this case:
application.js
//= require jquery3
//= require jquery-ui/core
//= require jquery-ui/widgets/slider
//= require rails-ujs
//= require popper
//= require cocoon
//= require social-share-button
//= require social-share-button/wechat
//= require rippleria/js/jquery.rippleria.min
//= require_tree .
application.scss
/*
*= require gmaps-auto-complete
*= require social-share-button
*= require jquery-ui/core
*= require jquery-ui/slider
*/
#import "pretty-checkbox/dist/pretty-checkbox";
#import "rippleria/css/jquery.rippleria";
application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag 'sub/style' %>
<%= stylesheet_link_tag 'sub/components.min' %>
<%= stylesheet_link_tag 'sub/custom' %>
<%= stylesheet_link_tag 'sub/chat.min' %>
<%= javascript_include_tag 'application', async: Rails.env.production? %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
I would hugely appreciate it if you guys could let me know what solutions I can do in order to avoid such random behaviors? Thank you very much for your time. :)
Never mind, I already solved the problem. The main issue that Ruby on Rails had is that if we use the JQuery provided by Rails 5.2.3 by the dependency written below
gem 'jquery-rails'
it will generate the application CSS file with the following line
#import 'jquery-ui.1.8.6.custom.css'
that involuntarily imports JQuery UI Custom CSS although the assets folder does not have the file written above
SOLUTION:
I would recommend you AGAINST using the JQuery provided by Rails 5.2.3 and change the JQuery using CDN method for best performance. So you can remove the following line on application.js
//= require jquery3
then load order of JQuery before application.js on application.html.erb like the following line:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<%= javascript_include_tag 'application', async: Rails.env.production?, :cache => 'cached/all' %>
Hope my solution could help. :)
Hi im currently working on a demo app and im currently working on ruby on rails, i want to implement angular material for my front end but when importing angular.js and angular.css like this.
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_include_tag 'application', media: 'all'%>
and my application.js consist of.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require angular-material
and my application.css has.
*= require_self
*= require_tree .
*= require angular-material
when trying to use the sample on angular material button. it only display the text . for example the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_include_tag 'application', media: 'all'%>
<%= csrf_meta_tags %>
<title>DEMO RUBY ON RAILS</title>
<h2>DEMO RUBY ON RAILS</h2>
<p>HELLO <%= #name %></p>
<%= link_to('HELLO INDEX RUBY',{:action => 'hello'})%><br/>
<%= link_to('HELLO WITH PARAMETERS RUBY',{:action => 'hello', :page =>5, :id=>20})%>
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button
</head>
<body>
</body>
</html>
it only display the button with text Primary. it does not display the button itself.
i really appreciate your answers. thanks
I've seen an issue with turbolink is not playing nicely with JQuery. One of my college had an issue with integrating material design for a rails project with turbolinks.
So try removing turbolinks from both application.css and application.js
Remove //= require turbolinks from application.js
I have a view that has a diagram tool implemented in JS using kineticjs and I want to load the JS files just in a specific view.
I have done this:
In the view:
<% content_for :head do %>
<%= javascript_include_tag "diagrams" %>
<% end %>
The manifest js file named diagrams.js:
//= require diagramtool/kinetic
//= require diagramtool/diagramtool0
//= require diagramtool/diagramtool1
//= require diagramtool/diagramtool2
The application.js file (removed the require_tree):
//= require jquery
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
The layout, application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Realyzor</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= yield(:head) %>
<%= csrf_meta_tags %>
</head>
And added this line in config/initializers/assets.rb:
Rails.application.config.assets.precompile += %w( diagrams.js )
And my problem is that, in order to get the files loaded I have to go to the view and refresh the page.
Why do I have to go to the view and then refresh the page to get the JS files loaded?
Why the JS files are not load when I go to the view?
I'm using rails 4.1.5
I have installed the Foundation 4 gem but now I would like to add some javascript such as dropdown buttons. I followed the instructions but zepto, jquery and foundation.min.js are not loaded when I get a view ("No route matches")
I added in the application layout :
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application" %>
<script src="/js/custom.modernizr.js"></script>
<%= csrf_meta_tags %>
in the head
<%= javascript_include_tag "js/vendor/custom.modernizr" %>
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
at the end of the body.
But there is no folder js/vendor right ? Where must I put them ?
Thank you in advance !
If you place JavaScript in your vendor folder, you can include it in your Rails application by adding it to your application.jsfile.
sample application.js
//= require jquery
//= require jquery_ujs
//= custom.modernizr
//= require foundation
//= require_tree .
Sprockets will look in your various assets directories to find your JavaScript.