My mates and I are working on a website using Ruby on Rails.
We managed to plug a bootstrap theme called Boomerang.
I think I kind of figured out our assets work but I have an error that I can't understand.
In the footer there are socials icons with tooltips that should be displayed when you hover them. But they are not displayed.Here is the HTML code I use to display the icons:
<a href="https://www.facebook.com/webpixels/" class="facebook" target="_blank"
data-toggle="tooltip" data-placement='top' title='title'
data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
In the console I see an error:
Error: TOOLTIP: Option "placement" provided type "undefined" but expected type "(string|function)". bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js:7:2581
typeCheckConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
_getConfig http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
i http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
_jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
jQuery 2
_jQueryInterface http://localhost:3000/assets/bootstrap/js/bootstrap.min.self-bb6761dcfa4675bf8423f8365beedf711cfb74e526bdc84b575d7024f1772e5b.js?body=1:7
http://localhost:3000/assets/boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js?body=1:900
jQuery 2
It seems that the error is coming from one file (bootstrap.min.js) so I tried to link the full file instead (bootstrap.js) and then the error changed to:
Error: TOOLTIP: Option "placement" provided type "undefined" but expected type "(string|function)". util.js:142:11
typeCheckConfig util.js:142
_getConfig tooltip.js:638
Tooltip tooltip.js:130
_jQueryInterface tooltip.js:694
jQuery 2
_jQueryInterface tooltip.js:685
boomerang.self-e1e63791e18eaede171d51277b9a09fe35d859c9a0314d67c65f3765dad80563.js:900
jQuery 2
It seems like another file is responsible for my error but I don't understand why. I've thought maybe there is a problem with the order the js files are actually loaded.
My javascript.js manifest file looks like :
//= require jquery/jquery.min
//= require popper/popper.min
//= require bootstrap/js/bootstrap
//= require slidebar/slidebar
//= require classie
//= require bootstrap-notify/bootstrap-growl.min
//= require scrollpos-styler/scrollpos-styler
//= require adaptive-backgrounds/adaptive-backgrounds
//= require countdown/js/jquery.countdown.min
//= require dropzone/dropzone.min
//= require easy-pie-chart/jquery.easypiechart.min
//= require fancybox/js/jquery.fancybox.min
//= require flatpickr/flatpickr.min
//= require flip/flip.min
//= require footer-reveal/footer-reveal.min
//= require gradientify/jquery.gradientify.min
//= require headroom/headroom.min
//= require headroom/jquery.headroom.min
//= require input-mask/input-mask.min
//= require instafeed/instafeed
//= require milestone-counter/jquery.countTo
//= require nouislider/js/nouislider.min
//= require paraxify/paraxify.min
//= require select2/js/select2.min
//= require sticky-kit/sticky-kit.min
//= require swiper/js/swiper.min
//= require textarea-autosize/autosize.min
//= require typeahead/typeahead.bundle.min
//= require typed/typed.min
//= require vide/vide.min
//= require viewport-checker/viewportchecker.min
//= require wow/wow.min
//= require isotope/isotope.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require boomerang
The error only happens when I put an HTML tag with the data-toggle="tooltip" whether I put a data-placement in it or not.
I have the same issue when I load the original template/theme locally without touching anything
If you ever encountered this issue please help.
As suggested by a comment that suddenly disappeared I tried adding
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
I noticed an error in the browser console ($ is not defined), I figured out jquery wasn't plugged in properly. Now jquery seems to be working, but still no cool tooltips.
Related
I tried adding https://github.com/ejbeaty/CellEdit to my Rails application. The code in https://github.com/ejbeaty/CellEditworks works perfectly as standalone; but when I include celledit.js inside my Rails application, i get this error in my broswer development console:
TypeError: jQuery.fn.dataTable is undefined
While the same code works fine in standalone application, why am I getting this error in Ruby on Rails app? What does this error mean? And how do I resolve it?
NOTE:
The error is coming from the function definition shown below:
jQuery.fn.dataTable.Api.register('MakeCellsEditable()', function (settings) {
var table = this.table();
jQuery.fn.extend({
Add the jquery rails gem to your Gemfile:
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
Run run bundle install.
Then include the dependencies in the correct order in your app/assets/javascripts.js:
...
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
In this case I just downloaded the files and placed them in app/assets/javascripts.
If you are using Turbolinks you want to hook the initialisation onto the turbolinks:load event as document.ready only happens on the initial page load:
//= require jquery
//= require jquery.dataTables.min
//= require dataTables.cellEdit
//= require_tree .
//= require_self
$(document).on('turbolinks:load', function(){
var table = $('#myTable').DataTable();
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
});
If you are not using Turbolinks then just use jQuery.ready(function(){...}) instead of $(document).on('turbolinks:load', function(){});.
I'm trying to implement jquery-ui's autocomplete, but seems like I'm missing something very important.
I'm following these guide from Railscasts (also available on Youtube). But I'm using Rails 5.1 and respectively yarn instead of the gem.
Also I'd like to mention that I already have datepicker and tabs implemented and working well.
Here is package.json's dependencies:
"dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"rails-ujs": "^5.2.0",
"turbolinks": "^5.1.1"
},
So in the top of my application.js I have this:
//= require jquery
//= require jquery-ui/ui/widget
//= require jquery-ui/ui/widgets/datepicker
//= require jquery-ui/ui/widgets/autocomplete
//= require jquery-ui/ui/widgets/tabs
And in the bottom:
$(document).on('turbolinks:load', function() {
$("#high_edu_name").autocomplete({
source: $('#high_edu_name').data('autocomplete-source')});
});
I receive the following error on the page load:
TypeError: $(...).appendTo(...).menu is not a function
from autocomplete.js:215:15
And when I try typing something to the text field I get:
TypeError: keyCode is undefined
Thanks in advance!
Well, lack of docs about installation through yarn is embarassing...
I made it through - it takes explicitly defining:
//= require jquery-ui/ui/widgets/menu
//= require jquery-ui/ui/keycode
//= require jquery-ui/ui/position
//= require jquery-ui/ui/version
The result looks like:
//= require jquery
//= require jquery-ui/ui/widget
//= require jquery-ui/ui/widgets/menu
//= require jquery-ui/ui/keycode
//= require jquery-ui/ui/position
//= require jquery-ui/ui/version
//= require jquery-ui/ui/widgets/datepicker
//= require jquery-ui/ui/widgets/autocomplete
//= require jquery-ui/ui/widgets/tabs
I am trying to integrate blueimp-gallery to my rails 4 application but when I try to display the caroussel i got this error :
Uncaught TypeError: Cannot read property 'name' of undefined
at this line of code:
style[transform.name] = 'translate(' + x + 'px, ' + y + 'px)' +
(transform.translateZ ? ' translateZ(0)' : '');
from the blueimp-gallery.js file
This is how I configure blueimp-gallery
gem 'blueimp-gallery'
in application.js
//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require angular
//=require angular-route
//= require angular-animate
//= require angular-resource
//= require blueimp-gallery-all
//= require_tree .
in application.css.sass
/*
*= require rails_bootstrap_forms
*= require blueimp-gallery-all
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets"
#import "bootstrap"
#import font-awesome
Is there anything that I am doing wrong??
That is a JavaScript error. You can do some detective work working backwards from the error. Set breakpoints and see where something didn't get assigned properly. Here is where transform should have been defined: https://github.com/Phifo/blueimp-gallery/blob/6d4014a5398b53f2fc854b6566ed53947b678714/vendor/assets/javascripts/blueimp-gallery.js#L224
In the application.js file, I have the requirements, and the on JQuery declaration:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.pjax
//= require_tree .
jQuery ->
$('#id').pjax('[data-pjax-container]')
However, I am getting the error Uncaught SyntaxError: Unexpected token > in the console. The jquery.ja and jquery.pjax.js files are loading in the resources and network tab of the inspector, so i know it is at least getting the jquery and pjax.jquery code, however, the shortcut `jQuery -> to signify document.ready, throws the error.
When I switch the code to :
$(document).ready(function() {
$('#ce').pjax('[data-pjax-container]')
});
I don't get the error. What is the correct shortcut for document.ready in Rails? I was following the PJAX tutorial here that says to use this notation.
What your are typing is Coffeescript syntax, that's the reason why its a syntax error.
I'm trying to introduce the jQuery UI autocomplete feature to a widget in a Rails 3.1.3 app. It doesn't do anything and on inspecting the scripts in Chrome developer tools, I see the following:
jQuery(function() {
return $("#location").autocomplete({
locations.js:3 Uncaught TypeError: Object #<Object> has no method 'autocomplete'
source: ["foo", "food", "four"]
});
});
I've included jQuery UI in application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
My coffeescript has the following:
jQuery ->
$('#location').autocomplete
source: ["foo", "food", "four"]
What am I missing!?
It turns out that since I also had active_admin, "//=require_tree ." was adding an older version of jQuery from the active_admin/vendor path which was removing the autocomplete method. Got rid of the "//=require_tree ." for now and explicitly added "//=require locations" and it works just fine.