Angular material not working in Ruby on rails - javascript

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

Related

404 Not found error when trying to use javascript file from bootstrap

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>.

Load custom JS files in specific view

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

Parallax not working with Rails

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>`

Add javascript to Foundation

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.

Unable to delete and display confirm box

I am unable to delete or display a confirm box in Rails 3.1.
I have the following lines in my application.hmtl.erb layout :
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
I have also tried to change "application" to :defaults or "prototype" or "jquery" but it didn't change anything.
Need help with this !
Confirm boxes and routing to REST actions are done by the the unobtrusive javascript file. You have this problem, because you don't have it included.
Check inside your application.js if you have the following lines (before any actual javascript code):
//= require jquery
//= require jquery_ujs
This example assumes that you have the jquery-rails gem in your Gemfile. If you have prototype-rails, you should switch to:
//= require prototype
//= require prototype_ujs

Categories

Resources