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
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 am trying to use the rails select2 gem, gem 'select2-rails'
But when I try to use it with the following order import order, my browser complains that select2 is not a function. From what I have found this order should be correct.
javascripts/application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2-full
//= require_tree .
$(document).on('turbolinks:load', function() {
console.log('(document).turbolinks:load')
$("#estimation_patient_id").select2({
theme: "bootstrap"
});
});
You can use
//= require rails-ujs
OR
//= require jquery_ujs
not needed to both
And modify like below
(function($){
$(document).on('turbolinks:load', function() {
$("#estimation_patient_id").select2({
theme: "bootstrap"
});
});
}(jQuery));
Remember it: sometimes //= require select2-full is not working but //= require select2 is working nicely with all requirements. I recommend to use //= require select2.
Hi i want to give date and time as input in rails. so i used datetimepicker in app. here is the link i had followed to use datetimepicker. but i am not able to see datetimepicker in my input field. what will be the mistake? where i am struggling? please advise me if you have ideas
https://github.com/lubieniebieski/bootstrap-datetimepicker-rails
here is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require switchery
//= require moment
//= require bootstrap-datetimepicker
//= require_tree .
here is my application.css
*= require_tree .
*= require_self
*= require switchery
*= require bootstrap-datetimepicker
here is my form.html
<tr>
<td class="col1"><label for="exam_date">Exam Date</label></td>
<td class="col2">
<%= text_field_tag :test_date%>
</td>
</tr>
here is my js
$(function() {
$('#test_date').datetimepicker();
});
Please help me to get out from this problem. tried a lot but could not find where i am struggling. it might be repeated. but i refered So before posting. so pls dont do downvoting. thanks in advance.
Most likely this bootstrap-datetimepicker plugin has a dependency on bootstrap.js.
Update your application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require switchery
//= require moment
//= require bootstrap
//= require bootstrap-datetimepicker
//= require_tree .
I am new to angularjs I am trying simple app by referring some startup tutorials
When i run my app getting error as
Uncaught Error: No module: app
Here is my controller
club-controller.js
'use strict';
var app = angular.module('app');
app.controller('ClubsIndexController', ['$scope','Club','$routeParams', function($scope, Club, $routeParams){
$scope.clubs = Club.query();
}])
models.js
'use strict';
var app = angular.module('app');
app.factory('Club', function($resource){
return $resource("clubs/:id", {id: '#id'},{
index: {method: 'GET', isArray: true, responseType: 'json'}
});
})
Here is my app.js.erb
'use strict';
angular.module('app', ['ngResource'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {controller: 'ClubIndexController', templateUrl: '<%= asset_path('templates/index.html') %>'})
}]);
I couldn't understand what is happening here. Can anyone help.
Edit-1
Changed my application.js file as
//= require jquery
//= require jquery_ujs
//= require angular
//= require ../angular/app.js
//= require_tree ../angular
But now getting error as Uncaught Error: No module: ngResource
The app.js file must be included before models.js or club-controller.js.
The module definition angular.module(name, [dependencies]) will create the module for you. The other usages angular.module(name) will get the module, and expects it to have been defined with dependencies already.
you have add in aplication.js require angular-resource.
//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-resource
//= require ../angular/app.js
//= require_tree ../angular