Can't get any javascript fucntions to work

[ghost]

I've been struggling to get this and Foundation 6 working in a rails 5 app for over a day now, I can't get it to display any menus properly. Any help is appreciated.

[shin10kudev]

I seem to be having a similar issue. The javascript for dropdown menu will work on initial page load, but will break (not re-initialize, I guess), when moving to another view...

[ghost]

Cant get this gem to work with rails 5

[DanMegaGamer]

@eliotc1986 It sounds like this is related to TurboLinks. Try adding gem 'jquery-turbolinks'

Then modify your Foundation initialisation to:

$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation(); });
});

[shin10kudev]

@Dannyguk Thanks for your response, it seems like our problem was related to turbolinks like you say. For our project, we ended up removing the turbolinks from our application.html.erb page

[ghost]

I made a new project without turbo links, still can't get java script to work

[kurko]

I just dropped the Javascript lib because it doesn't work at all. Using only CSS right now.

[amdest]

@kurko – there's no 'foundation' with type 'application/javascript' found in include paths. That's the problem (with Rails 5, at least), only 'foundation.js.es6' exist which Rails asset pipeline cannot load.

[bsodmike]

Hi all - any progress on this?

I've used Bower in Rails to wire this up in the past, and may look to fall back to that for now.

[alabamaair]

In Rails 5.1 I get error "couldn't find file 'foundation' with type 'application/javascript' with turbolinks and without turbolinks.

[ghost]

With the help of @bdesmarez I've gotten this resolved. I had to reorder and fine tune the order of loaded assets as below, and then change the $(document).on('turbolinks:load', function() as suggested by @Dannyguk

I've included my entire application.js code below. You also have to add the jquery-turbolinks gem to your gemfile (and bundle install)

On a related note, I believe that the foundation gem README could use a little work...as I found it a bit confusing, and if this is an issue after install it's possible the readme address correcting it by hand so that the framework actually works?

(I'm a bit new to all of this, hopefully not overstepping.

// 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, vendor/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
//= require turbolinks
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .

$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation(); });
});

[amdest]

I've dropped 'foundation-rails' usage for 'bin/yarn add foundation-sites' instead (Rails 5.1).
It forced me to make a bunch of customisations though, but now my app has a full set of Foundation 6.3.1 features without any problem.

[brentdodell]

I've dropped 'foundation-rails' usage for 'bin/yarn add foundation-sites' instead (Rails 5.1).
It forced me to make a bunch of customisations though, but now my app has a full set of Foundation 6.3.1 features without any problem.

Can you explain a little how you went about this? I'm fairly new to NPM, and javascript packages and using it with rails has be even more confused.

I'd like to use the SASS version of foundation-sites so I can customize the _settings.scss file as needed. I'm also interested in trying to use style-sherpa that's included with foundation-sites to create a living style guide for our rails app.

We're running on an old rails app, but it's just been upgraded to 5.1.2.

[ginomarckx]

The instructions of @jeremyawhitman don't seem to do the trick for me. Generally, Foundation works out of the box for me and I noticed that it does all the JS work required.

I just needed to add the following to my application.scss to make it work.

.is-dropdown-submenu {
    display: none;
}

[Kulgar]

Hello,
I managed to make this work on a rails 5.1 application without removing anything.
I posted my solution on stackoverflow: https://stackoverflow.com/questions/45754280/foundation-rails-6-3-10-and-rails-5-1-3-javascript-is-not-working-tap-bar-is-onl/46103701#46103701

[tthommmm]

Railsa 6.0.3
Ruby 2.6.0

I had an issue with some of my javascript not working. I'm working for someone right now (beginner) and I'm building the back-end of a website with someones front end template coded in html/css and javscript imports. I'm using bootstrap along with general.js and jquery-3.4.1.

My problem was that some of my javascript would load but some wouldn't, in fact some of the modals(drop downs) for other features wouldn't load. Also, the javascript in question(nav bar) would work on initial load, but when I rendered another view(redirect) the nav bar would not work. It was frustrating because there weren't any errors. Heres what I did and I hope it helps:

First take a good look at your application.js structure, some files may be dependent of one another. For instance my jquery and boostrap files were dependent of general.

I also did:

yarn add jquery

I have my javascript set up through application.js as rails should have it and my application.js file looks like this:

require("@rails/ujs").start()
require("turbolinks")
require("@rails/activestorage").start()
require("channels")

require('packs/general')
require('packs/jquery-3.4.1.min')
require('packs/bootstrap.bundle.min')

//= require_tree i18n

require('packs/picker')
require('packs/picker.date')
require('packs/picker.time')

require('packs/dropzone-amd-module.min')
require('packs/dropzone.min')

require('packs/dropzone')

require('packs/select2')
require('packs/select2.min')

I first got my nav bar to start working when I removed the .start() from turbolinks require. I don't know why it worked, but that seems to be the problem.

Also have this in my webpack.config (this helped me fix an issue with jquery not being loaded directly) I had an error in my inspect for this:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
module.exports = environment