In rails I am using bootstrap and dataTables via the jquery-datatables-rails gem. However, I only seem to get half the bootstrap styling.
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'
application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.core
//= require jquery.ui.datepicker
//= require twitter/bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require dataTables/extras/TableTools
//= require chosen-jquery
//= require best_in_place
//= require cocoon
//= require_tree .
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
application.css
*= require_self
*= require jquery.ui.core
*= require jquery.ui.datepicker
*= require dataTables/jquery.dataTables.bootstrap
*= require dataTables/extras/TableTools
*= require dataTables/extras/TableTools_JUI
*= require chosen
*= require_tree .
*/
specific coffee script
jQuery ->
$('#customers').dataTable
sDom: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
sPaginationType: "bootstrap"
bjQueryUI: true
erb
<table id="customers" class="display" cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped">
<thead>
<tr>
<th>etc.
However the styling is the one shown below and not that shown on the dataTable site http://www.datatables.net/media/blog/bootstrap/
Note the header is wrong and the stripes are purple not grey
Any thoughts on what else I need to do?
This all boiled down to my lack of understanding of the assets pipeline. Once I got my head around that more things worked well.
It seemed that I had played around with the precompile and compress options in development and so the public/assets directory had css files in that were overiding anything else I used.
Once I deleted the contents of that directory and configured my capistrano deployment to do a precompile on production everything worked well.
The asset pipeline is certainly excellent, but needs some care.
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
Reports_kit works fine without turbolinks but once tubolinks enabled it is not loading the charts.
Sortware version:
ruby -2.4.5
rails- 5.2
bootstrap sb-admin-2
postgresql
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require reports_kit/application
//= require bootstrap_sb_admin_base_v2
//= require font_awesome5
//= require all
//= require cable
//= require dataTables.bootstrap4.min
//= require jquery.dataTables.min
//= require jquery.easing.min
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require activestorage
//= require_tree .
app/assets/stylesheets/application.css
*= require bootstrap_sb_admin_base_v2
*= require font-awesome
*= require font_awesome5_webfont
*= require dataTables.bootstrap4.min
*= require reports_kit/application
*= require_tree .
*= require_self
config/reports_kit/reports/my_users.yml
measure: user
dimensions:
- created_at
app/views/dashboard
xxxxxx <%= render_report 'my_users' %>
config/routes.rb
mount ReportsKit::Engine, at: '/'
chart is loading after refreshing, only download buttons are displaying and after refreshing the ui is also not coming correctly
after refreshing
It works now after adding "turbolinks:load" as below to file
vi ~/.rvm/gems/ruby-2.4.5/gems/reports_kit-0.7.1/app/assets/javascripts/reports_kit/lib/_init.js
window.ReportsKit = {};
//$(document).ready(function() {
var ready = function() {
$('.reports_kit_report').each(function(index, el) {
var el = $(el)
var reportClass = el.data('report-class');
new ReportsKit[reportClass]().render({ 'el': el });
});
}
//});
$(document).on('turbolinks:load', ready);
I am using the Flexslider 2 Rails Gem from https://github.com/constantm/Flexslider-2-Rails-Gem.
As informed in documentation, I called the JS and CSS, but only the CSS is not loaded (yes, JS works).
ruby -v: ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-darwin11.0]
rails -v: Rails 4.2.1
flexslider version: flexslider 2.2.0
My app/assets/stylesheets/application.css
*= require pineapple
*= require font-awesome
*= require dropzone/basic
*= require application/style
*= require fancybox
*= require flexslider.css
PS.: I tried require flexslider (without extension) too.
My app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.slimscroll.min
//= require pineapple
//= require tinymce
//= require dropzone
//= require jquery-ui/sortable
//= require jquery-ui/effect-highlight
//= require jquery-ui/tooltip
//= require jquery.mjs.nestedSortable
//= require general
//= require maskedinput
//= require fancybox
//= require jquery.flexslider
My HTML (I stripped others li tags here, but is the same)
<div id="carousel0" class="flexslider carousel">
<ul class="slides">
<li>
<%=link_to '/page/dynamic' do %>
<%=image_tag image_path('show-case-1.jpg'), alt: 'Show Case', title: 'Show Case', class: 'img-responsive' %>
<%end%>
</li>
</ul>
</div>
My custom .JS
$('#carousel0').flexslider({
animation: 'slide',
itemWidth: 300,
itemMargin: 100,
minItems: 2,
maxItems: 4,
pauseOnHover: true,
slideshowSpeed: 8000
});
There are no console errors.
Thanks for your help.
You are only including the library and providing the markup. But you don't "Hook up the slider". See step 3 https://www.woothemes.com/flexslider/
Have you tried:
*= require flexslider.sass
Shot in the dark after looking through the gem you're using
[SOLVED]
My app has some "specific pages". The app has multiple sites independent each other.
In my app/assets/stylesheets folder and app/assets/javascript folder I have 1 more CSS and JS beyond the application.(JS|CSS)
There are sitetype.css AND sitetype.js.
I called require flexslider.css in sitetype.css AND //= require jquery.flexslider in sitetype.js and it works.
Thanks all for the help.
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 .