I am using rails 4.2.4
Gem file
gem 'angularjs-rails', '~> 1.4', '>= 1.4.7'
gem 'bootstrap-sass', '~> 3.3.6'
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require bootstrap-sprockets
//= require_tree .
application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
I have installed these files by manually downloading those files and including it in my javascript folder .
1) angular-datatables.min.js
2) angular-route.min.js
3) jquery.dataTables.min.js
4) routing.js
5) ui-bootstrap-0.14.0.min.js
6) ui-bootstrap-tpls.min.js
I don't know how to resolve this error actually I have never use angularjs But I need to include those files .My errors are
TypeError: Cannot read property 'serverSide' of undefined
at Object.f [as fromOptions] (angular-datatables.min.self-e164bdf0c2d9000c6262c232dc2dd041f3372c4d835392429a38b0919321ce99.js?bod…:7)
at angular-datatables.min.self-e164bdf0c2d9000c6262c232dc2dd041f3372c4d835392429a38b0919321ce99.js?bod…:7
at processQueue (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14793)
at angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809
at Scope.$eval (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053)
at Scope.$digest (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871)
at Scope.$apply (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161)
at bootstrapApply (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680)
at Object.invoke (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524)
at doBootstrap (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678)(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:12521(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:9293processQueue # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14801(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809Scope.$eval # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053Scope.$digest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871Scope.$apply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161bootstrapApply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680invoke # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524doBootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678bootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1698angularInit # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1592(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:29014fire # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3149self.fireWith # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3261jQuery.extend.ready # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3473completed # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3504
angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10766 GET http://localhost:3000/devices/js/device.json 404 (Not Found)(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10766sendReq # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10559serverRequest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10269processQueue # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14793(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809Scope.$eval # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053Scope.$digest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871Scope.$apply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161bootstrapApply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680invoke # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524doBootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678bootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1698angularInit # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1592(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:29014fire # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3149self.fireWith # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3261jQuery.extend.ready # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3473completed # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3504
You are loading angular-datatables before jquery.datatables which is causing that issue.
You should move your downloaded files to vendor/javascript folder and then load them in the correct order:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require bootstrap-sprockets
//= require jquery.dataTables.min
//= require angular-datatables.min
//= require_tree .
Related
I have the following field
<%= f.collection_select :tag_list, #tags.order(:name), :id, :name, {}, { class: 'select2', multiple: true } %>
I have added the select2-rails gem and have added the js and css in the respected files
//= require select2-full application.js
*= require select2 application.css
I have also added the following to my application.js file
$(document).ready(function() {
$('.select2').select2();
});
However, I'm getting the following
Won't even dropdown.
Rendered HTML
<select class="select2 hasCustomSelect" multiple="multiple" name="contact[tag_list][]" id="contact_tag_list" style="appearance: menulist-button; position: absolute; opacity: 0; height: 33px; font-size: 13px; width: 1563px;">
<option value="28">ANFIM</option>
<option value="11">BWT filter</option>
...
</select>
When adding the select2 js in the application.js I also get this
app.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require jquery_ujs
//= require prototype
//= require moment.min
//= require fullcalendar
//= require lib_ext
//= require BigDecimal-all-1.0.1.min
//= require dialog
//= require widgets
//= require classes
//= require payroll
//= require account_context_menu
//= require plan_table
//= require requirements
//= require help
//= require help_data
//= require jquery.contextMenu.js
//= require jquery.treetable
//= require jquery.jstree
//= require select2-full
//= require plugins
//= require scripts
//= require additional
//= require effects
//= require clusterize.min
//= require consolidated_orders
//= require sales_invoices
//= require main
//= require journals/auto_reversal
//= require budgets/new
//= require budgets/export
$(document).ready(function() {
$('.select2').select2();
});
try running
$(function() {
$('.select2').select2();
});
$(document).ready have been removed in jquery3
I could not reproduce the issue, I have the same libraries as you and imported css assets aswell, except that I have //= require jquery instead of //= require jquery.min but should not be a problem try running $('.select2').select2(); directly in your js console and see if it works - if so it looks like you have a problem with your jquery ready function
Reports_kit works fine without turbolinks but once tubolinks enabled it is not loading the charts.
Sortware version:
ruby -2.4.5
rails- 5.2
bootstrap sb-admin-2
postgresql
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require reports_kit/application
//= require bootstrap_sb_admin_base_v2
//= require font_awesome5
//= require all
//= require cable
//= require dataTables.bootstrap4.min
//= require jquery.dataTables.min
//= require jquery.easing.min
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require activestorage
//= require_tree .
app/assets/stylesheets/application.css
*= require bootstrap_sb_admin_base_v2
*= require font-awesome
*= require font_awesome5_webfont
*= require dataTables.bootstrap4.min
*= require reports_kit/application
*= require_tree .
*= require_self
config/reports_kit/reports/my_users.yml
measure: user
dimensions:
- created_at
app/views/dashboard
xxxxxx <%= render_report 'my_users' %>
config/routes.rb
mount ReportsKit::Engine, at: '/'
chart is loading after refreshing, only download buttons are displaying and after refreshing the ui is also not coming correctly
after refreshing
It works now after adding "turbolinks:load" as below to file
vi ~/.rvm/gems/ruby-2.4.5/gems/reports_kit-0.7.1/app/assets/javascripts/reports_kit/lib/_init.js
window.ReportsKit = {};
//$(document).ready(function() {
var ready = function() {
$('.reports_kit_report').each(function(index, el) {
var el = $(el)
var reportClass = el.data('report-class');
new ReportsKit[reportClass]().render({ 'el': el });
});
}
//});
$(document).on('turbolinks:load', ready);
I want different CSS files for different Layouts.
For example:
app/layouts/application.html.erb would have application.css
<%= stylesheet_link_tag 'application' %>
and app/layouts/admin.html.erb will have admin.css:
<%= stylesheet_link_tag 'admin' %>
Problem is that the admin.css is not precompiled when I run:
RAILS_ENV=production bundle exec rake assets:precompile
What can I do that the admin.css is also precompiled?
I'm using Rails 4.2
EDIT
admin.css file
/*
//= require bootstrap.min
//= require filechooser
//= require bootstrap-switch.min
//= require jquery.datetimepicker
//= require fancybox2_1_5/jquery.fancybox
//= require blubb
*= require_self
But onlye the code of the blubb.css file is added in admin.css ....
In initializers/assets.rb :
Rails.application.config.assets.precompile += %w(admin.css)
Here is my angular module and route
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/photo', {
templateUrl: 'templates/photo.html',
controller: 'PageController'
})
}])
When I run my app getting error as
error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
I have used this angularjs gem
Can any one help to solve this issue.
ngRoute is a separated module since some (maybe 1.2) version of AngularJS.
gem includes all modules, you just have to require needed ones in your application.js:
//= require angular
//= require angular-route
Here is the list with all available modules:
//= require angular
//= require angular-animate
//= require angular-cookies
//= require angular-loader
//= require angular-mocks
//= require angular-resource
//= require angular-route
//= require angular-sanitize
//= require angular-scenario
//= require angular-touch
In rails I am using bootstrap and dataTables via the jquery-datatables-rails gem. However, I only seem to get half the bootstrap styling.
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'
application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.core
//= require jquery.ui.datepicker
//= require twitter/bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require dataTables/extras/TableTools
//= require chosen-jquery
//= require best_in_place
//= require cocoon
//= require_tree .
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
application.css
*= require_self
*= require jquery.ui.core
*= require jquery.ui.datepicker
*= require dataTables/jquery.dataTables.bootstrap
*= require dataTables/extras/TableTools
*= require dataTables/extras/TableTools_JUI
*= require chosen
*= require_tree .
*/
specific coffee script
jQuery ->
$('#customers').dataTable
sDom: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
sPaginationType: "bootstrap"
bjQueryUI: true
erb
<table id="customers" class="display" cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped">
<thead>
<tr>
<th>etc.
However the styling is the one shown below and not that shown on the dataTable site http://www.datatables.net/media/blog/bootstrap/
Note the header is wrong and the stripes are purple not grey
Any thoughts on what else I need to do?
This all boiled down to my lack of understanding of the assets pipeline. Once I got my head around that more things worked well.
It seemed that I had played around with the precompile and compress options in development and so the public/assets directory had css files in that were overiding anything else I used.
Once I deleted the contents of that directory and configured my capistrano deployment to do a precompile on production everything worked well.
The asset pipeline is certainly excellent, but needs some care.