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
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>.
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
This is my custom layout file:
<%= stylesheet_link_tag 'template/template', media: 'all', "data-turbolinks-track" => true %>
<%= javascript_include_tag 'template/template', "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
and the below is my template.js file:
//= require jquery.min
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap.min
//= require gmap3.min
//= require jquery.appear
//= require jquery.bxslider.min
//= require turbolinks
I have made required changes in production.rb file, assets.rb and application file but the javascripts are not rendering on the production server.
I am getting the path of the my javascript file locally but on production server its showing Not Found.
What did I miss?
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>`
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.