We Keep Coding

Rails 4 with X-Editable doesn't work

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

Highlight.js and Rails, page needs refresh - turbolinks again?

My problem is pretty simple:
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require ckeditor-jquery
//= require_tree ./code
//= require turbolinks
hljs.initHighlightingOnLoad();
index.html.erb
<div class="ui items" data-no-turbolink>
<% #posts.each do |post| %>
<div class="index_post" data-no-turbolink>
<%= link_to post.title, post, class: 'ui large header' %>
<div class="date_created">
<%= post.created_at.strftime("%B %d, %Y") %>
</div>
<div class="content">
<%= simple_format(post.body) %>
</div>
</div>
<% end %>
</div>
Highlight.js and default.css.scss are in their places inside assets folder and everything works successfully If I refresh the page. I tried to comment out the turbolinks line in application.js and everything is ok. How can I make it work by keeping turbolinks ?
This is a issue I meet in almost every project I create. A solution could be to include data-no-turbolink in the link's tag that opens the view that I have the problem, but it's a homepage (and other ones) that do not depend on a single link. Finally, I prefer an optimum solution than a hack.

this one took me by surprise as well, however you need to account for highlightJS thinking that it has already been called in addition to TurboLinks bypassing the document.ready event. The code by #rsb only takes into consideration Turbolinks bypassing the document.ready event trigger. So you need hljs.initHighlighting.called = false in the answer from RSB:
ready = function() {
hljs.initHighlighting.called = false;
hljs.initHighlighting();
}
NOTE: that I changed the call to initHighlighting() rather than initHighlightingOnLoad().

Do this in your application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require ckeditor-jquery
//= require_tree ./code
//= require turbolinks
ready = function(){
hljs.initHighlightingOnLoad();
}
$(document).ready(ready);
$(document).on('page:load', ready);
Hope that helps!

Foundation 5 Topbar not working consistently in rails 4

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>

Rails not loading js in Chome from link_to

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.

Chartkick + Rails 4 "undefined method `pie_chart' for #<#<Class:..."

I am new to Rails. I followed the documentation and this example: Using Chartkick in Rails 4.0
but I cannot get Chartkick to work. I get undefined method pie chart. My js looks like this:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
I have tried including the javascript_include in both the application kayout and the show page. <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
Any ideas? Thanks all. I really do appreciate every bit of help I get here.

It turns out that, since Chartkick runs as an engine, I did not need to add // include chartkick into the application js file- I removed it and it worked like a charm. That means that the steps to get Chartkick to work in Rails 4 are:
add gem 'chartkick' to your Gemfile
add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb

Just add this to your chartkick's javascript_include_tag - 'data-turbolinks-track' => true. Also have a jquery-turbolinks gem installed (with it's correct structure of scripts requiring in application.js file). Finally restart the server.

write
#= require active_admin/base
require chartkick
in active_admin.js.coffee
and call direct jsapi from google like this in partial file.._items.html.ebr in app/views/items folder
javascript_include_tag "//www.google.com/jsapi", "chartkick"
pie_chart order, library: {pieSliceText: 'value'}
and then call this partial file like this
div class: 'custom-class' do
h3 'Items'
#item = Item.group(:menu_id).count #whatever data you pass to chart
render partial: 'items/items', locals: {item: #item}
end