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
Related
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
});
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'
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" }
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>
I'm trying to get this done for quite some time now and i can't figure out whats wrong:
My Link:
<%= link_to '#', tag, class: "tag-tooltip",
:data => {:toggle=>"tooltip"},
'data-original-title' => "Hey Whats up",
'data-placement' => 'right'%>
My Javascript:
$('.tag-tooltip').tooltip();
But it's not working... What am i missing ?
EDIT
If i go into my Chrome Console and insert ($('.tag-tooltip').tooltip();) it is working.
So i guess the js file is not loading ? (I checked my application.js and i'm requiring everything.)
I found out the wrapping which worked:
$(document).on("ready page:change", function() {
$('.tag-tooltip').tooltip();
});
Update:
$(document).on("turbolinks:load",function(){
$('.tag-tooltip').tooltip();
})
With vanilla JS
document.addEventListener("turbolinks:load", function() {
$('.tag-tooltip').tooltip();
});
In my case the problem was that I was loading jquery-ui after bootstrap-sprockets
In my application.js I changed:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require jquery-ui
to
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets
Then it all started working as it should.
You need to add some script in your code :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(
{container:'body', trigger: 'hover', placement:"right"}
);
});