Rails XHR get request is not instantiating the corresponding js file.
Example XHR localhost/admin does NOT load assets/admin.js which is breaking my js functionality. The only way admin.js will load is with a hard browser refresh.
If I include all the js code within admin-index view (that works too), but I want to keep it separated.
I tried updating development.rb as:
config.assets.debug = false
And tried adding this:
config.assets.precompile += %w( *.css *.js )
Can someone explain to me how to go about this please? Thanks.
I fixed this problem by adding the jquery-turbolinks gem. https://github.com/kossnocorp/jquery.turbolinks
Gemfile:
gem 'jquery-turbolinks'
Add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
Related
I recently installed active_admin gem.
Everything is working fine on Rails4, but jquery in my bootstrap page is not working anymore.
All animations are broken now, its like static page.
Any way of fixing it?
Thanks,
Michael
Solved.
What i did was, moved file active_admin.js.coffee from app/assets/javascript/ to vendor/assets/javascript . Also moved file active_admin.css.scss from app/assets/stylesheet/ to vendor/assets/stylesheet/ .
In application.js from content nothing was added, and require_tree is needed for both of those 2 files (application.js. and application.css )(no need to delete require_tree).
Same goes for active_admin.rb, nothing was added there either.
Application is now working correctly, loading css and jquery (my 1.7 version, not AA one).
-Michael
The key is to open application.js and application.css and remove the require_tree .. This is a bad default on Rails part because the user should specify load order anyway
Also do not forget to ad these lines in config/initializers/active_admin.rb
# == Register Stylesheets & Javascripts
#
# We recommend using the built in Active Admin layout and loading
# up your own stylesheets / javascripts to customize the look
# and feel.
#
# To load a stylesheet:
# config.register_stylesheet 'my_stylesheet.css'
# You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
# config.register_stylesheet 'my_print_stylesheet.css', :media => :print
#
# To load a javascript file:
config.clear_stylesheets!
config.register_stylesheet "application.css"
config.clear_javascripts!
config.register_javascript "application.js"
Then in you application.js
//= require jquery
//= require bootstrap
//= require bootstrap.switch
//= require bootstrap-tooltip
//= require active_admin/base
....
I've looked at about 10 answers to similar questions, and still can't figure this one out.
I'm trying to add some Angular to a preexisting Rails app I have, and started by following these tips.
So I have this in my app:
application.coffee
#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require libraries/angular.min
#= require libraries/angular-resource.min
#= require_tree .
#= require main-ng
then this
main-ng.coffee
#= require_tree ./controllers
angular.module('Posts', [])
#MainApp = angular.module("MainApp", [
# modules the app depends on -- this is all I've got so far.
"Posts"
])
In layouts/application.html.haml this is all I have relating to angular:
%html{ 'ng-app' => "MainApp" }
For some reason, doing ng_app: 'MainApp' didn't work here, though that syntax seems to work elsewhere (and has in other established apps with Angular I've coded in).
Then there's just the view with the controller:
posts/show.html.haml
.row.container{ ng_controller: 'PostCtrl' }
# Using hashrocket syntax brings up the same error, while misspelling it does nothing,
# so this syntax appears to be working here
and finally, the controller:
controllers/PostCtrl.coffee
#= require directives/markdown
postModule = angular.module("Posts", ["markdown"])
console.log postModule # returns angular object on page load
ctrl = postModule.controller "PostCtrl", ($scope, $http, $location) ->
$s = $scope
console.log 'Inside controller' # doesn't get hit
console.log ctrl # returns angular object on page load
Any ideas what noobish error I'm committing here? I've hit a wall here.
Possible clue -- changing the name of the controller in the view changes the name in the error, but none of the console logs, so it basically seems to be an error finding that particular controller.
Another thing of note -- requiring the js controllers directory in my main-ng.coffee file and declaring the controller on the MainApp module instead of the Posts module both don't seem to change anything.
I see your Post module declared twice
angular.module('Posts', [])
and
postModule = angular.module("Posts", ["markdown"])
I suggest copy the second one and replace first. Then remove the second module.
Both these syntax create new module so the one added earlier is overridden.
I'm actually building a new app under Rails 4.
I used to put my javascript_includes_tag at the bottom of my layout. But for an unknown reason, it creates a bug when trying to use confirm: on delete link.
So I put back this line at the top :
!!!
%html{ :lang => 'en' }
%head
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
So far so good, the bug is now gone. Anyway, since my app is gonna use a lot of Javascript, I still need to load those third part library at the bottom. So, what I did is to only let the Rails library at the top :
// application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
Then I tried to create another js file named third-part and try to do the same as application but including my third part libraries. Unfortunately, it does not work.
// third-part.js
//= require bootstrap
//= require app
//= require app.plugin
How can I add another javascript_includes_tag at the bottom the same way I did for application? Here I mean that on production it will also compress those files.
Thanks a lot for your help
EDIT :
It's actually loading my files well on DEVELOPMENT, but not on my production.
On production I just got <script data-turbolinks-track="true" src="/javascripts/third-part.js"></script> and I can't access the file
I've tried :
config.assets.precompile += %w( third-part.js )
and
rake assets:precompile RAILS_ENV=production
but it still not working
EDIT 2 :
I made a test of precompliling on production mode from my local machine. It did work. It might be a problem with my server.
EDIT 3 :
Just earse my application from server and clone a new one from my Github but it's still not working. Don't know why :(
In your config/environments/production.rb add this line to precompile the external assets
config.assets.precompile += ["third-part.js"]
and don't forget to mention env=production while precompiling assets on production.
When I use the application layout, the .js files already get concatenated and compressed in production environment. How about if i have a new layout on a different controller, How can I concatenate the .js files like in application layout?
And also for the css can I also merge it it to 1 file?
Controller
class ThingsController < ...
View
Let's say in app/views/things/index.html.haml
= javascript_include_tag 'things'
Assets
In app/assets/javascripts/things.js
//= require file_1
//= require file_2
//= require file_3
This way file_1, file_2 and file_3 will be included in things.js
Configuration
In production
config.assets.precompile << 'things.js'
Formtastic help says to add next lines in application.css:
# app/assets/stylesheets/application.css
*= require formtastic
*= require my_formtastic_changes
But what i'm gonna do when it is scss? Can't find it in search engines.
theres nothing left to do for you, place your my_formtastic_changes.scss in app/assets/stylesheets. Rails will automagically compile your scss file and add it to application.css