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.
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);
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 .
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
I'm trying to get this done for quite some time now and i can't figure out whats wrong:
My Link:
<%= link_to '#', tag, class: "tag-tooltip",
:data => {:toggle=>"tooltip"},
'data-original-title' => "Hey Whats up",
'data-placement' => 'right'%>
My Javascript:
$('.tag-tooltip').tooltip();
But it's not working... What am i missing ?
EDIT
If i go into my Chrome Console and insert ($('.tag-tooltip').tooltip();) it is working.
So i guess the js file is not loading ? (I checked my application.js and i'm requiring everything.)
I found out the wrapping which worked:
$(document).on("ready page:change", function() {
$('.tag-tooltip').tooltip();
});
Update:
$(document).on("turbolinks:load",function(){
$('.tag-tooltip').tooltip();
})
With vanilla JS
document.addEventListener("turbolinks:load", function() {
$('.tag-tooltip').tooltip();
});
In my case the problem was that I was loading jquery-ui after bootstrap-sprockets
In my application.js I changed:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require jquery-ui
to
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets
Then it all started working as it should.
You need to add some script in your code :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(
{container:'body', trigger: 'hover', placement:"right"}
);
});