JavaScript isn't working in ruby on rails. I have included my JavaScript in the assets file and in the application.js with //=require_tree ..
the code of the javascript i am trying to run: $( document ).ready(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
-
4It would be helpful if you provide detailed information about your case. Including the code example would be nice as well.Evgenii– Evgenii2015年08月09日 09:21:41 +00:00Commented Aug 9, 2015 at 9:21
-
in the application layout i have used javascript_include_tag and added the application.js in which it requires the tree....but it is not loading.suha baobeid– suha baobeid2015年08月10日 10:13:11 +00:00Commented Aug 10, 2015 at 10:13
-
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <meta charset="utf-8" /> <title>WebApp</title> <%= stylesheet_link_tag 'application.css', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', media:'all', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body>suha baobeid– suha baobeid2015年08月10日 10:13:37 +00:00Commented Aug 10, 2015 at 10:13
3 Answers 3
Make sure you are executing your javascript when the document is ready, like this (assuming you are using JQuery and Coffeescript):
$ -> # do you have this?
alert 'test'
Also check your browser's console for any errors.
UPDATE
Try to replace your code with this and see which alerts are showing...
$(document).ready(function() {
alert(1)
$('body').hover(
function () {
alert(2)
}
)
$('#nav > div').hover(
function () {
alert(3)
}
)
})
4 Comments
easeOutBack argument. if that doesn't work then try to apply your animation to $this instead of the img ($this.animate({ ....)Based on what you've given. You can try to check this/these:
Make sure your included javascript files are before the ending:
//= require_tree .
An example is this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
Depending on your setup you might want to precompile those assets in which case it might be useful to edit config>initializers>assets.rb
An example should be included in the file, just make a new line and replace it with your javascript filename.
As always, see the documentation here as it might help figure out your issue:
1 Comment
When javascript isn't working I ask myself a couple questions.
Is jQuery loading correctly? Open up chrome console, can you type $ hit enter and not receive an error? If you receive something like the following code, jQuery is working.
// console test
$
=> jQuery(selector, context)
Then you've got javascript working. But most of the time, I run into an error because I'm not telling javascript to wait until the document is done loading because I've forgotten the following lines of code.
// regular jquery / javascript
$( document ).ready(function() {
alert("This javascript thing is reals making me mad!");
});
Here's the same thing in Coffeescript
# Coffeescript
$(document).ready ->
alert 'This javascript thing is reals making me mad!'
return
If you receive alerts, then your javascript is working! However, the last question I might ask is, is my javascript file in the correct folder?
Be sure to place your .js file withing the app/assets/javascripts/ folder. Then it will be loaded within the assetpipeline.