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.
Related
Ok, I'm not sure if I'm the dumb one or if the Rails-Bootstrap-Markdown Gem just doesn't give enough information on how to correctly use the gem.
The text area shows the markdown buttons and correctly manipulates the text. Also, when I click "Preview," the text displays exactly like I want it ("bold", "italic", etc). But when I go to POST the text, it does not parse the text to HTML.
I've added `data: { provide: 'markdown' } to my form's text area and here are my JS and CSS.SCSS files:
application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require bootstrap-datepicker
//= require cocoon
//= require local_time
//= require bootstrap-markdown-bundle
//= require turbolinks
//= require_tree .
application.css.scss:
*= require jquery-ui
*= require bootstrap-markdown
*= require_tree .
*= require bootstrap-datepicker3
*= require_self
I think you are misunderstanding the use of bootstrap markdown here.
Simple Markdown editing tools that works!
It is stated as a markdown editing tool, that means it is used to produce markdown output, not html output.
The html tags you saw in preview is just something to simulate the display of value in markdown displayer, not the value itself.
If you want to translate the output(in markdown format) to html, you could consider these gems: redcarpet or kramdown
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 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
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.
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.