I'm using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.
Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?
Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs)
views/layouts/application.html.erb:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
</head>
<body>
<%= javascript_include_tag "application" %>
</body>
assets/application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(document).foundation();
Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?
Thanks
Alex
Foundation has known issues with Turbolinks, your issue may be due to that.
To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.
Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .
Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .
If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions. This is not necessarily a certain solution, but it'll guide you in the right direction.
Update: Try this order for importing your javascript assets. And, to quote the source:
Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js
// app/assets/javascript/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos
//= require turbolinks
Note: Look at Alex Aube's answer on this page for additional useful information.
Ok. To go along with what Ecnalyr explained. (Which he explained correctly, and I kind of misunderstood for a little bit). This worked for me:
I kept = javascript_include_tag "application" at the end of the body of application.html.erb
application.js is like this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(document).foundation();
//= require turbolinks
This works for turbolinks progressbar and foundation tabs, dropdown links, accordion
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
var ready;
ready = function() {
$(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);
I recently experienced this issue.
Using jquery.turbolinks didn't fix it. Reordering the requires in the application.js didn't fix it.
Nothing mentioned so far here did the trick.
The solution I found was to move the foundation initializer from application.js to within the body. I just put it below my _nav partial.
<script>
$(document).foundation();
</script>
Related
I am working on a rails app. It is a standard app, using server rendered pages, and jquery. I have had a decently hard time wrangling together the jquery and i am not sure why.
I am using jquery for a couple things: a datepicker and a timepicker. That is only used for a form a user can use, and is rendered in a users section where they can create/edit.
The structure of my javascript is right now i am using 1 javascript file called main which is required in my application.js. That is all the JS i am using.
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap.min.js
//= require jquery.raty.min.js
//= require jquery.turbolinks
//= require chosen-jquery
//= require turbolinks
//= require main
//= require_tree .
main.js
$(document).ready(function() {
// users profile stuff
if ($('table.calendar tbody tr td ul').hasClass('active-trip')) {
$('.active-trip').parent().css('background-color', 'orange');
}
$("#trip_start_date").datepicker({
minDate: 1
});
$("#start_date").datepicker({
minDate: 1
});
$("#end_date").datepicker({
minDate: 1
});
// ==========
// js in user's trips
$('#trip_start_time').timepicker();
$('#trip_end_time').timepicker();
// ===========
});
The problem that I am having is I am using a bootstrap navbar, with some JS effects on it (dropdowns). On this one page (a resource called "Gyms", or /gyms) the JS completely breaks and leaves the navbar useless. The error that I am getting is
Uncaught TypeError: $(...).timepicker is not a function
And I notice when I get that error once, it then starts repeating and I get it on every page. But yet, when I go back to the form where i use this code, it works completely fine even with the error?
This might be a turbolinks issue, but I am really not sure. I am using these gems
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
if that helps anything. I have also played around with using the jQuery CDN script rendered in application.html.erb but that doesn't really seem to help or hurt anything and is pretty much neutral. Any help would be much appreciated
Try changing the order of requiring:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
put jquery.tubolinks before all other scripts but right after jquery
I'm trying to learn Ruby on Rails and understand the asset pipeline. I figured a good way to do this would be to create my website in Rails and learn with it. However, upon implementing my JS, it seems to add it to the file, but do nothing with it as the scripts aren't working (or some of them...)
I have just set it up on Heroku as I assume that's the easiest way for you to see the code? https://secret-citadel-76066.herokuapp.com/
I haven't yet called owl carousel so I'm sure that would fix the main sections as they're all owl carousels, but what's not working is the navigation and also a scroll to next section should scroll in, and at the bottom a scroll to top should scroll in.
However, somethings work - such as the scrollbar (nicebar).
Any suggestions?
EDIT:
//= require jquery
//= require jquery_ujs
//= require jquery.easing.1.3
//= require detectmobilebrowser
//= require isotope.pkgd.min
//= require wow.min
//= require waypoints
//= require jquery.counterup.min
//= require jquery.nicescroll.min
//= require gmaps
//= require materialize-sprockets
//= require common
//= require stuart-green
//= require turbolinks
note: I deleted the tree because I want to have more control over what loads when
We have the same issue in our project just like yours.
sometimes our js files not working but no error.
try to remove
//= require turbolinks
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap.min
app/assets/javascripts/economy.js:
$(document).ready(function() {
console.log("loaded file");
});
app/views/economy/index.html.erb:
<%= javascript_include_tag "economy" %>
app/config/initializers/assets.rb:
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( economy.js )
Why doesn't economy.js print anything to the console when a page in my app is loaded?
I tried adding //= require economy.js but that didn't change anything, and should be redundant if I understand how require_tree works.
You're right that it should be automatically included.
The only thing that jumps out, given this level of detail, is that you have //= require bootstrap.min in there and a require should never have a file extension. It may be breaking all the requires. Change that to //= require bootstrap or for the sake of testing economy.js loading or remove it entirely for now.
If that doesn't work, here's a few things to try:
Try an alert("loaded file"); in case there is an issue with you browser console.
Try adding //= require economy without the .js.
Check the browser's sources to see if the file got loaded to narrow down the issue.
Also, don't forget to close your $(document).ready call with a ; at the end of }).
I found the answer. My app/assets/javascripts folder had a file called economy.coffee (for some reason?!), and all I had to do was remove it. I think it was overwriting my js file or something.
I think I'm missing something... probably minor but I couldn't find a solution for the past few hours. I'm beginning with websites so forgive the noob question
I'm using this library (I've tried many...)
https://github.com/bootstrap-ruby/bootstrap-editable-rails
I do everything as instructed (see steps below)
I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing. Maybe some javascript isn't enabled or something... Can't tell
My application.js is like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-editable
//= require bootstrap-editable-rails
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
Turbolinks.enableProgressBar();
I have added the file bootstrap-editable.css to my app/assets/stylesheets folder
and changed my application.css.scss to
//= require ./bootstrap
//= require rails_bootstrap_forms
//= require font-awesome
//= require_tree .
//= require_self
//= require bootstrap-editable
I then go in my class partial and add the following "dummy" snippet of code
<td>superuser</td>
I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing
Thanks for your help!
I don't know if you still need an answer but try the following.
Download this https://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.1.zip ( include corresponding files to your app directories).
Add something like that in your view:
<a name='name' href="#" id="username">MyUserName</a>
Add some javascript into your application.js:
$(document).ready(function() {
$('#username').editable({
type: 'text',
url: '/edit',
title: 'Enter username'
});});
Read more details here:
https://vitalets.github.io/x-editable/docs.html
My rails application does not seem to be loading some javascript behavior after being sent to a page via the link_to helper. This is happening in Chrome, but not IE (which hurts me to say). I've seen Chrome not loading behavior in multiple pages for bootstrap-switch, and for some custom functions that I have in my source tree. These will work after I reload the page from Chrome, but not off of the initial link_to.
Here is my application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
//= require bootstrap-switch
//= require jquery-placeholder
//= require jquery_nested_form
Is there some known limitation in how Chrome receives or renders javascript from the link_to helper? Please let me know if I can provide any additional information that will be helpful to resolve this.
I can see from your application.js that you're using turbolinks.
When using turbolinks, $(document).ready(function() { .. is ignored when clicking on internal links because the page never actually reloads in the traditional way.
You have a couple of alternatives, rewrite/restructure your JS so that it plays nicely with turbolinks (by not having page-specific JS includes, by scoping your events appropriately, etc) or you can disable turbolinks if you don't want to use it by:
removing it from your Gemfile
remove the //= require turbolinks from your application.js
remove the 2 references to "data-turbolinks-track" => true in your layouts/application.html.erb.