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"}
);
});
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
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.
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'
How to perform this piece of lightbox code using rails link_to method
<img src="img/bmw.jpg">
the image_tag outputs images well
image_tag(#ad.photo.url(:medium))
so how to use this image_tag with link_to so lightbox works?
my application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require lightbox
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
and my application.css is
*= require_tree .
*= require_self
*= require foundation_and_overrides
*= require lightbox
*= require mystyle
*/
link_to image_tag(#ad.photo.url(:medium)), #ad.photo.url(:original), data: { lightbox: "cars", title="MyCaption" }
Breakdown: The first image_tag is your thumbnail, and the second, is your original image which will be shown in the modal generated by lightbox.
Btw: That is Slim syntax.
Working code after debugging:
link_to image_tag(#ad.photo.url(:medium)), image_path(#ad.photo.url(:medium)), data: { lightbox: "cars", title="MyCaption" }
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 .