I'm a newby struggling to get bootstrap datetimepicker to work. Could somebody help me out with setup ?
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require nested_form_fields
//= require bootstrap-datepicker
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.ru.js
//= require bootstrap-datepicker/locales/bootstrap-datepicker.et.js
//= require moment
//= require bootstrap-datetimepicker
trainings.coffee
$('#training_start_time').datetimepicker({ format: 'dd/mm/yyyy hh:mm' });
view
= form_for #training do |f|
...
= f.text_field :start_time, :data => { :provide => 'datetimepicker', date_format: 'dd/mm/yyyy hh:mm' }, :value => f.object.start_time.strftime("%d/%m/%Y %H:%M")
Try to convert your javascript codes to coffee script style.
$('#training_start_time').datetimepicker format: 'dd/mm/yyyy hh:mm'
Related
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 .
On Gemfile I have this following gem gem 'rails-timeago', '~> 2.0' and on application.js I load these scripts in this order
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap/bootstrap
//= require rails-timeago
//= require locales/jquery.timeago.fr.js
//= require jquery.flexslider
//= require_tree .
On my view I'm calling timeago
<%= timeago_tag story.created_at, :nojs => true, :limit => 3.days.ago, :lang => :fr %>
On application.html.erb
<%= timeago_script_tag %>
and On my browser I have this result
<script>
//<![CDATA[
jQuery.timeago.settings.lang="en";
//]]>
</script>
Even though I copy-paste this code to replace the script_tag and added .lang="fr" on application.html.erb, it still doesn't do the translation.
The view segments (from the browser):
<time data-time-ago="2014-02-24T03:04:02Z" datetime="2014-02-24T03:04:02Z" lang="fr" title="Mon, 24 Feb 2014 03:04:02 +0000">2 days</time>
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"}
);
});