I have a problem with ruby on rails and materialize (javscript connexion ). I have installed https://github.com/mkhairi/materialize-sass and desactive turbolinks.
For example when I create a drop menu on my html page and when in the javascript file I initialize the drop menu. It does not work as if there was no javascript
in my view (indexCo.html.erb):
<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four
</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</div>
application.js :
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require materialize
$('.dropdown-trigger').dropdown();
application.html.erb :
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
I tried with turbolinks or directly importing into application.html.erb with
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
and
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js
But nothing works, same with parallax or any other elements
Thanks for your help
and sorry for google translate
bye
Do not deactivate turbolinks. Nowhere in the documentation:
https://github.com/mkhairi/materialize-sass
does it say to deactivate turbolinks.
You can change the application.css to application.scss and drop this: #import "materialize"; in there per the docs instructions or you can create a custom.css.scss and drop in the #import "materialize";.
Next step and I suspect the reason why you were not getting any behavior is to require jquery, just like you required materialize like so:
//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .
I can understand, missing this step as its not covered in the docs, so it makes it a slight gotcha which can be a wall if you don't think it through calmly and carefully.
Lastly, in that same application.js file you drop the final piece from the docs:
//= require rails-ujs
//= require jquery
//= require materialize
//= require turbolinks
//= require_tree .
$(document).on('turbolinks:load', function() {
$('.dropdown-trigger').dropdown();
});
I recently had the same issue and finally figured it out.
Change
//= require materialize
to
//= require materialize-sprockets
I'm not sure what the technical difference is, but it worked for me in Rails 5.1.6.
Related
I looked through some related questions suggesting how to maneuver the asset pipeline, but still am unable to get it to work.
index.html.erb:
<%= javascript_include_tag "playlist" %>
<div class="demo">
<div class="demoPlate plate" style="margin: 0 auto;">
</div>
</div>
application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
//= require_tree .
$(document).ready(function(){
$("#event_when").datetimepicker({
format:'Y/m/d H:i'
});
$("#user_dob").datetimepicker({
timepicker:false,
format:'Y/m/d',
maxDate:'0'
});
});
playlist.js:
$(function(){
$('.demoPlate').plate({
playlist: [
{"file":"files/morgantj_-_caf_connection_1.mp3"}
]
});
});
The files that the plugin need to be compiled are:
jquery-ui, jquery, plate.js, and they have playlist.js in the body.
I have tried all ends of the asset pipeline, but cant figure out what im missing.
The instructions they gave for installing are (Screenshots):
Part 1
Part 2
Any help is greatly appreciated!
If you put the following inside application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
You should have all of these files inside the directory of app/assest/javascripts
I will automatically loaded inside one file "application.js" , no need to declare or include inside <head></head> tag, unless you don't include the application.js file in layout.
you can also require playlist.js after setting up jquery plugins/dependencies
I can't quite figure out what I'm doing wrong with respect to my asset pipeline (amateur hour).
I'm using the Froala editor (rails gem) and when I visit the page where I want to render in my wysiwyg editor, it's spaghetti falling out over the page. (The JS isn't being applied.)
I've tried to account for the rails turbolinks issue by implementing the on page:load function beside call to init foundation, but it obviously doesn't work.
Here's my current setup.
application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require froala_editor.min.js
//= require turbolinks
//= require cocoon
//= require_tree .
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
Here's the form itself:
wysiwyg post _form
<div class="field">
<%= f.text_area :body, id: "wysiwyg" %>
</div>
Here's what I'm doing in the new and edit pages:
new.html.erb (and edit)
<% content_for :head do %>
<%= stylesheet_link_tag "froala_editor.min.css" %>
<%= stylesheet_link_tag "froala_style.min.css" %>
<%#= javascript_include_tag "froala_editor.min" %>
## commented out, tried both to no avail.
<% end %>
Also tried including my froala_editor.min.js both ways to no avail. What the heck am I doing wrong?
Edit:
No errors or anything in the rails log or dev console.
Also, when I refresh the page, the js does work and it's no longer "spaghetti," just not on initial page load.
Edit two ("general" is where my miscellaneous scripts are, per #thedanotto):
Updated as follows but still no luck. Still works on page refresh.
//= require jquery
//= require jquery_ujs
//= require froala_editor.min.js
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require turbolinks
//= require foundation
//= require general
//= require cocoon
//= require_tree .
Add another js file and put it within the app/assets/javascripts/ folder.
Move this code from application.js to new-js-file.js
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
I'd then move the froala_editor.min.js into app/assets/javascripts/ folder as well. And just make sure your froala_editor.min.js is named earlier in the alphabet than your new file. IE your new file should start with a g or later so it loads in the browser afterwards.
Otherwise you can add froala_editor.min.js to /public. Then load it within application.html.erb
It turns out I had not required the Froala CSS files properly in the tree. I was pulling it in directly in the view but when I added it to the list in application.css it worked.
*= require scaffolds
*= require froala_editor.min.css
*= require froala_style.min.css
*= require foundation_and_overrides
*= require_self
*= require_tree .
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!
I have a header with 2 buttons : Login and Sign up Like this.
When I click on one of them, a window appear : window open. For this I use the "Reveal Modal" of foundation (Reveal Modal).
My problem : If I click on link for open a new page of my website and try to open / close the Login or Sign up popup, the window is closed but this time the shadow stay (like this) and I need to press F5 for this works again.
I use Rails 4 and foundation 5.
File _header.html.erb (View Partial)
<div class="large-12 columns header">
<div class="logo">
logo
</div>
<div class="infos">
<ul>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
</div>
<div id="login" class="reveal-modal" data-reveal>
<p>
Page Test
</p>
</div>
<div id="signup" class="reveal-modal roundish" data-reveal>
<p>
Page Test
</p>
</div>
File application.js
//= require jquery
//= require turbolinks
//= require foundation
//= require bxslider/jquery.bxslider.min.js
//= require home
//= require_tree .
$(function() {
$(document).foundation();
});
Thank you for your help.
This works for turbolinks progressbar and foundation tabs, 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);
The problem was Turbolinks.
Solution : Put //= require turbolinks at the end
//= require jquery
//= require bxslider/jquery.bxslider.min.js
//= require foundation
//= require home
//= require_tree .
$(document).foundation();
//= require turbolinks
Thank You #AlexAube for your help ! :)
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>