On Gemfile I have this following gem gem 'rails-timeago', '~> 2.0' and on application.js I load these scripts in this order
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap/bootstrap
//= require rails-timeago
//= require locales/jquery.timeago.fr.js
//= require jquery.flexslider
//= require_tree .
On my view I'm calling timeago
<%= timeago_tag story.created_at, :nojs => true, :limit => 3.days.ago, :lang => :fr %>
On application.html.erb
<%= timeago_script_tag %>
and On my browser I have this result
<script>
//<![CDATA[
jQuery.timeago.settings.lang="en";
//]]>
</script>
Even though I copy-paste this code to replace the script_tag and added .lang="fr" on application.html.erb, it still doesn't do the translation.
The view segments (from the browser):
<time data-time-ago="2014-02-24T03:04:02Z" datetime="2014-02-24T03:04:02Z" lang="fr" title="Mon, 24 Feb 2014 03:04:02 +0000">2 days</time>
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
I have an issue with my javascript files, seems they are not load properly in each redirect from my app. I need make a refresh to get load them.
Im using rails 5, and turbolinks 5.
This is how my application.html.erb asset tag helpers looks like
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
and this is my application.js
//= require rails-ujs
//= require jquery.min.js
//= require activestorage
//= require turbolinks
//= require_tree .
//= require bootstrap.min.js
//= require bootstrap-datepicker.js
//= require circle-progress.min.js
//= require html5shiv.min.js
//= require jquery.appear.js
//= require jquery.appear.min.js
//= require jquery.countTo.js
//= require jquery.easing.1.3.js
//= require jquery.flexslider-min.js
//= require jquery.magnific-popup.min.js
//= require jquery.stellar.min.js
//= require jquery.waypoints.min.js
//= require owl.carousel.min.js
//= require respond.min.js
I get all my libraries from vendor/assets/javascripts
Turbolinks 5 - to load the javascript properly use following events below :
$(document).on('turbolinks:load', function () {
// jquery javascript
// your code snippet here
});
document.addEventListener('turbolinks:load', function(event) {
// vanilla javascript
// your code snippet here
});
Here is my show page -
%ul.nav.nav-tabs
%li.active.text-center{style: "width: 50%"}
%a{:href => "#project_details"} Details
%li.text-center{style: "width: 50%"}
%a{:href => "#project_analysis"} Project Analysis
Here is my application.js -
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
.. other scripts
//= require bootstrap-sprockets
//= require bootstrap-select
.. other scripts
//= require turbolinks
//= require turbolinks-compatibility
Head content of App -
%html
%head
%meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%meta{content: "width=device-width, initial-scale=1, maximum-scale=1", name: "viewport"}/
%title REOM
= Gon::Base.render_data
%link{href: "http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400", rel: "stylesheet", type: "text/css"}/
%link{:href => "https://fonts.googleapis.com/css?family=Lato:400,400i,700", :rel => "stylesheet"}/
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
- if javascript_exists?(controller_name)
= javascript_include_tag controller_name
= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
= csrf_meta_tags
Before adding Turbolinks, Tabs were working perfectly, but now when I click the other tab, the page reloads and shows the content of the first tab.
First, you need to go in this exact order:
//= require jquery
//= require tether
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require turbolinks
//= require turbolinks-compatibility
# other scripts
try add the option to your <a> tag
data: { turbolinks: false }
# data-turbolinks: false
I'm a newby struggling to get bootstrap datetimepicker to work. Could somebody help me out with setup ?
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require nested_form_fields
//= require bootstrap-datepicker
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.ru.js
//= require bootstrap-datepicker/locales/bootstrap-datepicker.et.js
//= require moment
//= require bootstrap-datetimepicker
trainings.coffee
$('#training_start_time').datetimepicker({ format: 'dd/mm/yyyy hh:mm' });
view
= form_for #training do |f|
...
= f.text_field :start_time, :data => { :provide => 'datetimepicker', date_format: 'dd/mm/yyyy hh:mm' }, :value => f.object.start_time.strftime("%d/%m/%Y %H:%M")
Try to convert your javascript codes to coffee script style.
$('#training_start_time').datetimepicker format: 'dd/mm/yyyy hh:mm'
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 .