I am having trouble with getting my bootstrap popover to work correctly in my rails application. I have tried solutions to other questions with no success.
Currently in my HTML I have:
<i class="icon-exclamation-sign" id="info" rel="popover" data-content="some info"></i>
and
<script>
$(function () {
$(".icon-exclamation-sign").popover();
});
</script>
My application.js looks like:
//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require_tree .
//= require bootstrap-tooltip
//= require bootstrap-popover
and my application.css looks like:
/*
*= require_tree .
*= require bootstrap-datepicker
*/
And I get the error: Uncaught TypeError: Object [object Object] has no method 'popover' when loading the page. What am I doing wrong?
EDIT: Also I have tried just using require bootstrap instead of tooltip and popover in my application.js with no luck.
Try putting the code under /app/assets/javascripts/ and see if it changes anything.
/javascripts/some_name.js
$(document).ready(function() {
$(".icon-exclamation-sign").popover();
});
Actually I think the problem is that //= require_tree . should be last, try the following:
//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require_tree .
Same for application.css
I finally figured out the problem by following the advice here.
I had to add the line to my development.rb file:
config.serve_static_assets = false
Try the rake assets:clean command. This should delete any legacy JS/CSS that hasn't picked up your changes.
With most browsers you can view the source of the page to check the versions of the the asset files it's using, see if your changes are being picked up in there and if they aren't, this might work.
Related
I'm beginner in RoR and trying to enable pickadate.js in my app.
In matching controller's file app/assets/javascripts/calc_date.js.coffee
I've typed:
$ ->
$(".date").pickadate()
In form partial app/views/calc_date/_form.html.haml I've typed:
= form_tag('/calc_date/calc') do
%div
%b Please, select date:
= date_field_tag 'date', #date, id: "date", class: "date"
= submit_tag 'Calculate'
When I click into input field nothing is happening.
I'm expecting that a calendar widget will appear but it won't work.
In application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require pickadate/picker
//= require pickadate/picker.date
//= require pickadate/translations/ru_RU
//= require_tree .
In application.css:
*= require pickadate/default
*= require pickadate/default.date
*= require_tree .
*= require_self
I did a try with jquery-ui-date and it worked. I use the same way with pickadate.js but got no reaction from it.
In terminal window I can see lines like this:
Started GET "/assets/pickadate/picker.js?body=1" for 127.0.0.1 at 2015-03-12 15:26:44 +0300
Started GET "/assets/pickadate/picker.date.js?body=1" for 127.0.0.1 at 2015-03-12 15:26:44 +0300
What is my mistake or what had I've missed?
Thank you.
I know this is a little old but I just came across a similar issue and I think it would be the same problem you seem to be having.
Bit of a run down for my situation:
I'm working on a client's form and have pickadate running, it was working, then I realized that every time I loaded a new page it wouldn't initiate... refresh page, works again.
What was the problem...... TURBO LINKS.... my god, that thing drives me nuts. I always take it out but it was in there as I can see its in your app too.
Apart from that, your code seems fine, should be working.
The Rails asset pipeline ignores the first folder in the assets directory. Try this instead:
In application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require picker
//= require picker.date
//= require translations/ru_RU
//= require_tree .
In application.css:
*= require default
*= require default.date
*= require_tree .
*= require_self
I would like to include the following datetime picker in my rails application.
http://www.malot.fr/bootstrap-datetimepicker/
I am using twitter bootstrap for rails, but can't get it to work.
I tried adding the .js file to the assets/javascripts directory and using //= require to include it in the application.js file.
The files are loading on the page, but I'm getting a response that
Uncaught TypeError: Object [object Object] has no method 'datetimepicker'
Any ideas? I've reverted all of my changes, so can start again from scratch.
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require_tree .
I think the problem happened at //=require_tree. Yes you added that plugin but the plugin is loaded after your custom js which have method to call the plugin. That's why "Object has no method 'datetimepicker'".
I would suggest you to:
Move the plugin into vendor/assets/javascripts/. This is a better place for third party libs.
require the plugin explicitly in application, after bootstrap(it depends on bootstrap's dropdown. Like
//= require bootstrap
//= require datetime_picker_js_file_name
//= require_tree .
Side notes:
I don't quite know why there are two bootstrap js files required. Are they duplicate?
Besides, I would recommend to require Bootstrap js files only on need, like
//= require bootstrap-dropdown
//= require bootstrap-alert
Bootstrap datepicker just won't work for me. I know this question has been asked before but after searching a long time I could not find an answer.
I have the following configurations. When loading the page, the input field appears but no calendar to select appears when clicking on the field. Any help is very appreciated.
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require bootstrap-datetimepicker
//= require bootstrap-datepicker
//= require_self
$('[data-behaviour~=datepicker]').datepicker()
application.css
/*
*= require_self
*= require_tree .
*= require bootstrap-datepicker
*/
custom.css.scss
#import "bootstrap";
#import 'bootstrap-datetimepicker';
and in the view
<input type="text" data-behaviour='datepicker' >
I have tried a couple of variations suggested in other topics on stackoverflow, but none of them worked. E.g.,
$(function() {
$('#dp5').datepicker()
});
together with
<input class="span2" id="dp5" readonly="" value="02-02-2012" size="16">
does not work neither.
Have you tried this gem: https://github.com/lubieniebieski/bootstrap-datetimepicker-rails ?
It will pack your Javascript and CSS required for datetimepicker into rails asset pipeline properly.
This problem happens because of the jquery version in your case
//= require jquery
Try downloading another version of the jquery and replace your current one. I had the exact same problem and that was the solution. Try with versions 1.5 or 2.0 or something like that.
Also, please note that by:
//= require_tree .
You are including .js files from the javascript directory, so please be sure that you haven't downloaded another version of jquery and you are automatically including second version also. You will have conflict issues.
If it all doesn't work you can try to look at the answer here also jQuery in Rails 3.2 not displaying datepicker
Important:
Make sure when you are testing to refresh your page with ctrl+ F5 ! It will refresh the whole page from the beginning and it will not include cashed elements and this is very important as you might find a solution, but due cashing you will not notice the change and you could miss the solution only because of the cashing.
I'm creating a rails site using the bootstrap-sass gem and it works fine.
I'm also successfully initializing the typeahead on my js.erb:
$container.find('.typeahead').typeahead({source: [<%= #cities %>], items:20});
But now I want to use an extended version of typeahead that uses an array of kvp objects instead of strings. This one from tcrosen seems just fine.
I added their bootstrap-typeahead.js to app/assests/javascripts folder. Changed the application.js to include that file:
...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-typeahead
//= require_tree .
But it seems that he's using the typeahead function defined on bootstrap.min.js instead of the new one.
How can I point him to use the right file?
ps: I'm using other bootstrap javascripts plugins so I can't just delete bootstrap.min.js
Instead of specifying the global file
//= require bootstrap
you can separately require them :
//= require bootstrap-affix
//= require bootstrap-alert
//= require bootstrap-button
//= require bootstrap-carousel
//= require bootstrap-collapse
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap-scrollspy
//= require bootstrap-tab
//= require bootstrap-tooltip
//= require bootstrap-transition
and so don't include the last one //= require bootstrap-typeahead. With that you can require the bootstrap-typeahead javascript file from tcrosen (putting in your asset javascript directory and require it, but don't forget to rename it also, otherwise the old bootstrap typeahead will be use). Tested with bootstrap-sass and tcrosen/twitter-bootstrap-typeahead.
This is driving me absolutely bonkers, and it seems like such a simple thing to implement. I can't get tooltips (or, for that matter, popovers) to work. I have the 'twitter-bootstrap-rails' gem installed, and I generated the appropriate .js and .css files.
I don't think it's a JQuery issue because I have other JQuery functionality on my site that works perfectly.
Here's some relevant code.
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require_tree .
$('a').tooltip();
application.css
*= require_self
*= require_tree .
*= reqire_twitter/bootstrap
Code I'd like to get to work for tooltips
test
The above code, when hovered over, just shows Chrome's normal tooltip. I'm getting the same behavior in Safari, so I doubt it's browser-specific.
I'm using Rails 3.2.7, adding Bootstrap manually. Everything works just fine.
application.css
*= require style
*= require bootstrap.min
*= require bootstrap-responsive.min
*= require_tree .
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
$(document).ready(function(){
$('a').tooltip();
});
//= require_tree .
and layout/application.html.erb
<head>
<%= stylesheet_link_tag("application", :media => "all") %>
</head>
<body>
<%= yield %>
<!-- scripts concatenated and minified via build script -->
<%= javascript_include_tag "application" %>
<!-- end scripts -->
</body>
</html>
Your application.js code will be executed before your web page is fully loaded into the browser, so your line of code will not find any element prior to the page load.
You will need to execute when the DOM is fully loaded:
$(document).ready(function () {
$('a').tooltip();
});
The solution to this was two-fold.
Change the $ in the code to jQuery. This got rid of the "Object # has no method 'ready'" error.
I had a bootstrap.js.coffee file that had irrelevant code. When I deleted the file, everything began working again. This got rid of the "Uncaught TypeError: Cannot call method 'tooltip' of null" error.
After much fighting, in order to get it working properly with Rails 3.2 I had to do the following:
in application.js:
//= require bootstrap
in the view template where I want the tooltip, include the rel='tooltip' attribute:
= link_to "Link text", title: 'Click to reveal tracks', 'data-placement' => 'top', rel: :tooltip
or if you're not using HAML:
Link text
in any of the coffeescript files (I created a new one) put this:
jQuery ->
$('[rel="tooltip"]').tooltip()
This works, though the styling for the tooltips are not working, I can't figure out why, but the javascript seems to be working at least.
Hopefully this will help someome else.
As someone commented already, bootstrap-sass includes a coffeescript file which has this in it:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
If you call this file there is no need to include the other coffeescript file above since this one does the same thing. In my case I already have bootstrap.js called from application.js so this one wasn't called (I removed require_tree so I can call the files I want in the order I want).