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
Related
I am new to rails; and I implement a new rails app with front view and admin view. I need to load assets based on the selected view means when I view admin section it only loads admin required assets.
By default rails build a application.js, I created a admin.js and place the code like in application.js and also add my custom assets which are placed in vendor folder but it not loaded any assets
This the code what actually I have
#application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require morris/morris (custom file placed in vendor folder)
//= require_tree .
#admin.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require morris/morris (custom file placed in vendor folder)
//= require_tree .
The main problem is the custom file is loaded only when loads the application.js file
Sprockets needs to know which files to compile. Add this to config/application.rb:
config.assets.precompile += ['admin.js']
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.
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.
We require a number of different manifest files in order to only serve up the appropriate JS files for various functional areas of our site, however I'm currently having to replicate the JS file name and version number in each file so our manifests look like:
libs.js
//= require json2
//= require underscore-1.3.1
//= require jquery
//= require jquery-ui-1.8.17.custom.min
//= require jquery_ujs
//= require farbtastic-1.3u.gizmos
//= require bootstrap-2.0.1
//= require highstock-1.1.4.src
//= require exporting-1.1.4.src
//= require modernizr-2.5.3
//= require application
//= require validation
//= require navigation
//= require styles
libs-embedded.js
//= require json2
//= require jquery
//= require highstock-1.1.4.src
//= require exporting-1.1.4.src
I've tried to fix this by changing these manifest files with these .js.erb equivalents:
libs.js
<%= ManifestHelper.require_json2%>
<%= ManifestHelper.require_underscore%>
<%= ManifestHelper.require_jquery%>
<%= ManifestHelper.require_jquery_ui%>
<%= ManifestHelper.require_jquery_ujs%>
<%= ManifestHelper.require_farbtastic%>
<%= ManifestHelper.require_bootstrap%>
<%= ManifestHelper.require_highstock%>
<%= ManifestHelper.require_exporting%>
<%= ManifestHelper.require_modernizr%>
<%= ManifestHelper.require_application%>
<%= ManifestHelper.require_validation%>
<%= ManifestHelper.require_navigation%>
<%= ManifestHelper.require_styles%>
libs-embedded.js
<%= ManifestHelper.require_json2%>
<%= ManifestHelper.require_jquery%>
<%= ManifestHelper.require_highstock%>
<%= ManifestHelper.require_exporting%>
The ManifestHelper class includes methods such as:
def self.require_underscore
'//= require underscore-1.3.1'
end
This is intended to allow me to manage the JS file and version numbers in one place even though they are used in many manifest files.
However, when I try to do this, my libs.js files looks like:
//= require json2
//= require underscore-1.3.1
//= require jquery
//= require jquery-ui-1.8.17.custom.min
//= require jquery_ujs
//= require farbtastic-1.3u.gizmos
//= require bootstrap-2.0.1
//= require highstock-1.1.4
//= require exporting-1.1.4
//= require modernizr-2.5.3
//= require application
//= require validation
//= require styles
//= require navigation;
There are two problems with this. Firstly a semicolon is introduced for some reason. The second is that the generated .js file is not being populated with the concatenated js files defined in the //= requires directives.... It appears that although the .erb substitution is happening in the .js.erb file, it appears to be happening after the manifest file has read through the directives.
My question is... Can anyone suggest a way to fix this problem or suggest an alternate solution for me to stop replicating the js file and version numbers in each of my manifests...
Thanks,
Ian
One possible workaround would be to move shared javascript files into a "shared" subdirectory, then from your manifest file, use the require_directory directive to pull in the shared files.
//= require_directory shared
One bonus of this method is that you only have to drop a javascript file into the "shared" directory for it to be available for all the parent manifests that have the require_directory statement. No updating manifests or helper files.
Only potential issue there is that you can't control the order of the loading of the shared files if you have load order dependencies for those files. But that can be sorted out with a little more effort using an index manifest in the subdirectory to statically list the order of the files, then point to the index manifest from the parent manifest.
We managed to use this problem by using gems that wrap up the javascript libraries, for example we've been using the following gems:
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'twitter-bootstrap-rails'
gem 'select2-rails'
gem 'underscore-rails'
gem 'underscore-string-rails'
This then allows you to include the relevant javascript library in your manifest using just the name of the library. For example: //= require select2 instead of //= require select2-x.y.z
Obviously the gems do many good things like managing the asset pipeline integration but we didn't have the library version numbers all over the place which I liked.