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 ! :)
Related
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.
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've included the gem and ran bundle which includes all the files in the gem lib perfectly fine.
application.js looks as such:
//= require jquery
//= require jquery_ujs
//= require skrollr
//= require skrollr.stylesheets
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require_tree .
I've included this in the bottom of application.html.erb before the end of the body tag and also tried including in individual view as well:
<script type="text/javascript">
$(function(){
skroller.init();
});
</script>
and for calling this in the view I used the example provided by skrollr:
<div data-0="background-color:rgb(255,0,0);" data-500="background- color:rgb(0,0,255);">
WOOOT
</div>
but to my dismay I have not seen any effects. What could I possibly be missing?
<script type="text/javascript">
$(function(){
skrollr.init(); # skroller changed to skrollr
});
</script>
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!