Материализация 1.0.0 gem не позволяет выполнять функции jquery
С драгоценным камнем materialize 1.0.0 я продолжаю получать «Uncaught TypeError: sideNav» или «раскрывающийся список не является функцией» и вернулся к версии materialize 0.100.2, чтобы все заработало. Я знаю, что это происходит из-за того, что jquery и materialize не работают вместе, как должны, поэтому, если у кого-то есть какие-либо идеи по этому вопросу, я был бы признателен, чтобы вместо этого начать использовать 1.0.0.
Вот некоторый код. Дайте мне знать, если вам нужно больше.
приложение.js
//= require rails-ujs
//= require turbolinks
//= require activestorage
//= require jquery
//= require materialize
приложение/макеты/общий/_header.html.erb
<nav>
<div class = "nav-wrapper">
<a href = "#!" class = "brand-logo">Logo</a>
<a href = "#" data-target = "mobile-demo" class = "sidenav-trigger"><i class = "material-icons">menu</i></a>
<ul class = "right hide-on-med-and-down">
<li><a href = "sass.html">Sass</a></li>
<li><a href = "badges.html">Components</a></li>
<li><a href = "collapsible.html">Javascript</a></li>
<li><a href = "mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<ul class = "sidenav" id = "mobile-demo">
<li><a href = "sass.html">Sass</a></li>
<li><a href = "badges.html">Components</a></li>
<li><a href = "collapsible.html">Javascript</a></li>
<li><a href = "mobile.html">Mobile</a></li>
</ul>
<script>
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
Я также пытался вернуться к более старым версиям драгоценного камня jquery-rails, но другие драгоценные камни в моем приложении полагаются как минимум на 4.2, и возврат к этой версии не представляется возможным.
Да, я понял. Но я только что наткнулся на ссылку, которая заставила меня понять, что мне не хватает сценария кофе в моей папке javascript. Я опубликую это как ответ, так что, если у кого-то еще будет такая же проблема, это должно помочь.
Ответы 1
Хорошо, ребята, я провел немного больше исследований и обнаружил сообщение на GitHub, которое помогло мне понять, что я ошибался в том, что моя проблема связана с версией jquery, и что мне действительно нужно было добавить сценарий кофе в мои ресурсы/папку javascript, чтобы помочь вместе. https://github.com/mkhairi/materialize-sass/issues/176
Раньше мне это никогда не приходило в голову, потому что 0.100.2 никогда этого не требовал. Надеюсь, это поможет любому, кто наткнется на этот пост с той же проблемой.
Вот файл, который я добавил.
активы/javascripts/init.coffee
$(document).on 'turbolinks:before-visit turbolinks:before-cache', ->
elem = document.querySelector('#slide-out');
instance = M.Sidenav.getInstance(elem) if elem
if instance
instance.close() if instance.isOpen #close on click
instance.destroy()
$(document).on 'turbolinks:before-visit turbolinks:before-cache', ->
$('.toast').remove()
$(document).on 'turbolinks:load', ->
elem = document.querySelector('#slide-out');
instance = new M.Sidenav(elem, {}) if elem
$(document).on 'turbolinks:load', ->
Waves.displayEffect()
# Reset
M.Modal._count = 0;
M.ScrollSpy._count = 0;
$('.modal').modal();
$('.carousel').carousel();
$('.collapsible').not('.expandable').collapsible();
$('.collapsible.expandable').collapsible({accordion: false});
$('.tap-target').tapTarget();
$('.slider').slider();
$('.parallax').parallax();
$('.materialboxed').materialbox();
$('.scrollspy').scrollSpy();
$('.datepicker').datepicker();
$('.timepicker').timepicker();
$('.tooltipped').tooltip();
$('.dropdown-trigger').dropdown();
#form
M.updateTextFields()
$('select').not('.disabled').formSelect();
$('input.autocomplete').autocomplete data:
'Apple': null
'Microsoft': null
'Google': 'http://placehold.it/250x250'
$('input[data-length], textarea[data-length]').characterCounter();
$('.tabs').tabs();
# Swipeable Tabs Demo Init
if $('#tabs-swipe-demo').length
$('#tabs-swipe-demo').tabs 'swipeable': true
# Chips
# Handle removal of static chips.
$(document.body).on 'click', '.chip .close', ->
$chips = $(this).closest('.chips')
if $chips.length and $chips[0].M_Chips
return
$(this).closest('.chip').remove()
$('.chips').chips()
$('.chips-initial').chips
readOnly: true
data: [
{ tag: 'Apple' }
{ tag: 'Microsoft' }
{ tag: 'Google' }
]
$('.chips-placeholder').chips
placeholder: 'Enter a tag'
secondaryPlaceholder: '+Tag'
$('.chips-autocomplete').chips autocompleteOptions: data:
'Apple': null
'Microsoft': null
'Google': null
# Fab
$('.fixed-action-btn').floatingActionButton()
$('.fixed-action-btn.horizontal').floatingActionButton direction: 'left'
$('.fixed-action-btn.click-to-toggle').floatingActionButton
direction: 'left'
hoverEnabled: false
$('.fixed-action-btn.toolbar').floatingActionButton toolbarEnabled: true
console.info "load init on ready or turbolinks:load"
Это легко исправить. Sidenav и раскрывающийся список теперь отлично работают!
Я, вероятно, задам очевидный вопрос.... Вы включили файл сценария materializecss?