I import my own javascript in my application.js like this:
//= require 'overlay'
then I include application in my application.html.erb like this:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
then I find that in my page I got
<script src="/assets/overlay-4f9aec59c40642be0f9be34f4dac3fdf.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1" data-turbolinks-track="true"></script>
in /assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1 also iclude the overlay.js which means overlay.js is included in my page for twice.
such as I write this in overlay.js:
$('#ele').click(function() {console.log 'overlay.js';})
when I click the button, I will get two line overlay.js, how can I solve this?
Put your js file under the folder assets/javascripts
Doing this you don't need to write this
//= require 'overlay' Instead of this write
//= require_tree . in your application.js file. Hope it will work.
Related
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
Now I have used couple of hours to integrate rails work together with angular, and I am about to give up. I am following this tutorial:
link to tutorial
'
and I made it even simpler
In my application.js I require the following :
//= require jquery
//= require jquery_ujs
//= require angular
in my main.js.coffe I ask to get the following js files :
#= require_self
#= require_tree ./controllers/main
and in my app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee I have the same lines as he does in tutorial :
#IndexCtrl = ($scope) ->
$scope.title = "My blog"
So here is the funny part :
my "Master" view is exactly the same as in tutorial :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
So in theory when I run my app at http://localhost:3000/main/Index I should get the exact same result as he does, but no.
I am getting Runtime error, which says that it has failed at (in /app/assets/javascripts/main.js.coffee) and nothing else. I really can't figure out what exactly is going wrong. If I switch controller_name with some random string like 'hugabuga' page loads and of course angular wont work because there are no link to the controller Index.
I am not very experienced with cofee script, but maybe the way controller is defined is not correct?
In another tutorial I had to add another Gem
gem 'angular-rails-templates'
And also amend the application.js to include:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .
The order that the JS is listed is also important. Make sure you have the same in your file as what is shown in the video.
Im trying to make basic structure of my project to work out. In my "Master" file i have a line which call main.js.coffee script file:
<%= javascript_include_tag "application", 'main' %>
in my main i have call to the next js files :
#= require_self
#= require_tree ./controllers/main/
./controllers/main/ contains just 1 single file mainIndexCtrl.js.coffee
so here is the structure:
So on call of url:port/main/index application.html.erb is called which call to main.js.coffee which than call to mainIndexCtrl.js.coffee, or more like that what i think it does, because doesnt matter what i do i cant get rid of folowing error:
I am VERY new to Rails, so basicly i really dont know what to do because this error doesnt exactly saying anything to me.
Main.js.coffee :
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
#= require_self
#= require_tree ./controllers/main/
application.js
//= require jquery
//= require jquery_ujs
//= require angular
There is an error in your main.js.coffe file. Either correct the syntax/code error in the file or remove it from your javascript_include_tag (like: <%= javascript_include_tag "application" %>) Also, it would make sense to include this file in your application.js, if it is to be used, to take full advantage of the asset pipeline....
Does anyone know how to use YUI with Rails? If I call,
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/menu/assets/skins/sam/menu.css">
it works. BUT if I use my own folder and do something like this,
<link rel="stylesheet" type="text/css" href="../../../vendor/yui/build/menu/assets/skins/sam/menu.css">
it does NOT work. These files, css and js, will not communicate with each other if dissected from their folders and placed adjacently under app/assets, the way Rails requires. I don't care about compressing and minimizing anything. I just want it to work.
In your application.html.erb layout
<%=stylesheet_link-tag "vendor/yui/build/menu/assets/skins/sam/menu.css"%>
One more suggestion is that please use app/assets/stylesheets folder put your menu.css there
and simply in your application layout
<%=stylesheet_link-tag "menu.css" %>
My solution was, in application.css,
*= require ../../../vendor/assets/yui/build/reset-fonts-grids/reset-fonts-grids
*= require ../../../vendor/assets/yui/build/menu/assets/skins/sam/menu
In application.js,
//= require ../../../vendor/assets/yui/build/yahoo-dom-event/yahoo-dom-event
//= require ../../../vendor/assets/yui/build/container/container_core
//= require ../../../vendor/assets/yui/build/menu/menu
And finally in application.html.erb, the layout,
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I had a little trouble with js, enabled only on page refresh. But reinstalling gem 'turbolinks' magically fixed the problem. My files are just as I downloaded from Yahoo, no directory changes, under
/vendor/assets/yui
I hope nobody took my 'Java' sarcasm too seriously )
I am a newbie in Ruby on Rails and need to know what things we have to be careful about if we are willing to use jQuery in a Ruby on Rails application.
In my view page I have:
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<%= javascript_include_tag "application" %>
<script>
alert("hussain")
alert($('#hussi').val())
</script>
It gives the first alert as expected, but for the second alert it says '$' is not defined.
I have the jquery-rails gem installed.
The browser points out that I have a missing reference in my application.js file.
require jquery;
require jquery_ujs;
I saw some file examples where they mention it like:
= require jquery;
= require jquery_ujs;
But adding'=' raises an IDE error in my IDE.
Add this to you application.js:
//= require jquery
//= require jquery_ujs
and add this to your Gemfile:
gem 'jquery-rails'
Also make sure you have this in you application layout:
<%= javascript_include_tag "application" %>
Just a note: avoid using tags in your code, move your javascript to your assets folder.
There is a typo in your code: text/javas c ript. This causes the script to not be parsed.