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.
Related
I'm using chart kick in a standard way, like how the GitHub instructions dictate and it works in a local version. When uploaded to Heroku my charts produce an error "ReferenceError: Can't find variable: Chartkick" on the rendered partial page.
this is what I've done so far.
gemfile:
gem 'chartkick'
application.js:
//= require Chart.bundle
//= require chartkick
//= require_tree .
my show view renders a partial that calls a controller action via path method.
my controller action:
def event_names
#applet = RegisteredApplication.find(params[:id])
render json: #applet.events.group(:name).count
end
my partial that calls the action:
<%= pie_chart event_names_registered_application_path %>
I'm thinking the reason I'm getting the "ReferenceError: Can't find variable: Chartkick?" is because of the asset pipeline. But I don't fully understand what i can do to solve it is. please help :D
Just ran into the same issue. Make sure that application.js gets loaded before the Chart in your view. See details
I have difficulties integrating select2-rails with ActiveAdmin. I followed setup steps on
Select2-rails Github page: https://github.com/argerim/select2-rails and I added line:
//= require select2
to app/assets/javascripts/application.js and line:
*= require select2
to app/assets/stylesheets/application.css
so I assume when I have page in ActiveAdmin I should be able to add line:
$('#add_student_select').select2()
to active_admin.js.coffee
But its not working. In console I can see following error:
Uncaught TypeError: undefined is not a function
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
completed
I also followed this StackOverflow question which recommends to add this line to active_admin.css.scss:
body.active_admin {
#import "select2";
}
But then I get following error:
File to import not found or unreadable: select2.
Do I integrate it correctly? I don't think that ActiveAdmin is able to get even access to the librabry.
If you're adding Select2 to the ActiveAdmin interface, you must add the javascript and styles to the ActiveAdmin assets:
# app/assets/javascripts/active_admin.js.coffee
#
#= require select2
#
# ...
And the stylesheets:
// app/assets/stylesheets/active_admin.css.scss
//
//= require select2
//
// ...
In the example you provided, Select2 would be available to the main Rails application, but not ActiveAdmin. ActiveAdmin uses its own javascript and stylesheet files.
I had met the same issue making select2 work with activeadmin, but instead I used a gem named activeadmin-select2. I had installed it according to the README, but I still got error "File to import not found or unreadable: select2.". It seems like that select2-rails had not been installed or not be accessible, however. So then I tried to add select2-rails to my Gemfile, and bundle, lastly, everything went well. You should checked your gem loading before you can make it work.
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'm building a custom action for rails admin that includes a custom view.
I want to include a local copy of sparkline.js but I can't figure out a way to do this.
I tried to add the sparkline.js to the /vendor/assets/javascripts/actions/action_name directory but it is not loaded by rails admin
Is there any other way to get this file loaded
I did this by putting the external library into the app/assets/javascripts/rails_admin/custom directory and adding a 'require' statement to the rails_admin ui.js file.
i.e.
// in app/assets/javascripts/rails_admin/custom/ui.js
//= require ./sparkline.js
You can do this with coffeescript too:
# in app/assets/javascripts/rails_admin/custom/ui.js.coffee
#= require ./sparkline.js
I can use Jasminerice (https://github.com/bradphelan/jasminerice) to test a class like:
class #Survey
constructor: (id) ->
#id = id
With the test:
#= require survey
describe "Survey", ->
it "has id of one", ->
v = new Survey(1)
expect(v.id).toEqual(1)
It works like that, but I can't add the "ko" variable without getting an undefined for "ko". I tried adding #= require knockout but it says it can't find the file (I load knockout from a cdn).
How can I add a script source tag for knockout so jasminerice can load it?
The solution is to add the knockout-rails gem but don't add the require on the application.js. That way you can still use the knockout js file from the cdn and be able to add the #= require knockout to the file spec.js.coffee