I'm trying to create a fixed header table in my index view. After 2 days I'm on it, I finally found the jQuery fixedheadertable addon, and I still can't use it. I guess I'm doing something wrong because it's the first time I'm using jQuery. This is what I have done:
Added the file jquery.fixedheadertable.js to \app\assets\javascripts
In application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
..
..
In my_js_coffee_file:
$ ->
$("#id_of_my_index_table").fixheadertable({
caption : 'My header is fixed !',
height : 200
});
Also tried:
$ ->
$('#id_of_my_index_table').fixedHeaderTable('show');
No change at all...
what's wrong here?
Thanks.
Your question does not have the details to properly analyse what is wrong. However, try these and see if it helps.
Does your application.js have require_tree in it? Also, try adding your my_js_coffee_file in the end of the application.js
Ex :
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
//= require my_js_coffee_file
Or alternatively, you can also code the same thing inside the application.js file itself. And then try running. Check your console log to see what errors pop up.
Using stickyTableHeaders JQuery plugin solved my problem.
https://github.com/jmosbech/StickyTableHeaders
Related
I can't get my prints.js file to get picked up by the manifest (I presume that is the issue.)
this is in the appliction.js manifest:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'main'
//= require 'cards'
//= require 'prints'
//= require_tree .
the cards.js has a console log saying hello like this :
$(document).on('turbolinks:load', function() {
console.log('cards js file executed.')
...
});
When I do the same thing for cards.js like this:
$(document).on('turbolinks:load', function() {
console.log('Prints js file executed.');
});
the console only calls out the cards.js console log statement, but not prints.
I restarted rails server, and rebooted my local machine hoping that would pick it up. but no result.
(Rails 4.2)
EDIT
I am decided to use the application.js for hosting the function I need.
Though it works, it feels 'cheap' and if anybody has any suggestions of what could make a manifest not include files, that would be greatly appreciated. But I have a temporary solution.
try without quote like following. after change please restart server
//= require main
//= require cards
//= require prints
I am trying to transform a static website to rails. At the moment I have following javascript:
$(document).ready(function() {
$('#slider').s3Slider({
timeout: 3000
});
});
in app/views/layouts/application.html.erb placed inside head tag. The script is working fine(i.e. sliding few images).
I know this is not the right place to have javascript code.
1. Could anyone help me to place this code in the right place in the assets? and
2. Will it work as it is or I will have to make changes?
Update
In app/assets/javascripts/application.js I have the following:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require welcome
//= require_tree .
aap/assets/javascripts/welcome.js is the file that now contains the above mentioned javascript code
Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine
I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.
I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working
In my javascript application.js file I have the following
//= require search
//= require tutorial
//= require_self
//= require_tree .//message
Is there a problem with me putting //= require_tree .//stock after require_self? It looks like everything is working but I'm not sure of the implications of putting tree after self.
All that is doing is changing the order of where the javascript contained in application.js, if any, is concatenated with the rest of the assets. If you have any code in application.js that is required in search or tutorial, then it will not work correctly.
You can read more about directive in the RailsGuides.
Yes, order matters, thats why jquery is always on top, if you have any js that deppends on it, it wont work
Cheers! I am trying to implement popup window with Lightbox_me plugin in my Ruby On Rails application. I have downloaded jquery.lightbox_me.js, put it to app/assets/javascripts,
add //= require jquery.lightbox_me in application.js file, and in home.js.coffee (I've HomeController) I do stuff like this:
`$(".popup-button").click (e) ->
alert "!!!"
$(".download_layout").lightbox_me centered: true
e.preventDefault()
alert shows normally, but .lightbox_me doesn't work. Whats the problem?
EDIT:
application.js
//.......
//= require jquery
//= require jquery_ujs
//= require jquery.lightbox_me
//= require bootstrap
//= require_tree .
Try to stick to the CoffeeScript syntax :
$(document).ready ->
$(".popup-button").click (e) ->
$("#download_layout").lightbox_me
centered: true
e.preventDefault()
EDIT : Don't forget to place this very important string on the top of your .js.coffee(I have replicated your code on my machine and it works) :
$(document).ready ->