Как настроить материализовать JavaScript в веб-приложении Phoenix elixir - PullRequest
Новая
       24

Как настроить материализовать JavaScript в веб-приложении Phoenix elixir

1 голос
/ 20 октября 2019

Я пытаюсь использовать javascript-функции materizecss, но в браузере появляется сообщение об ошибке ниже.

Сообщение об ошибке : Uncaught TypeError: $(...).carousel is not a function

Есть идеи, как правильно настроить JavaScript? Где поставить <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>?

Для примера, который я пытаюсь реализовать, это Material Box для медиа (https://materializecss.com/media.html),

В моем проекте я поставил <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> и

<script>
$(document).ready(function(){ $('.materialboxed').materialbox(); });
</script>

в конце app.html.eex, прямо перед </body>

В моем .eex.html, где я показываю изображение, я показываю изображение, яиспользовал что-то похожее на img_tag(user.photo_path, class: "materialboxed")

1 Ответ

2 голосов
/ 22 октября 2019

Ваша настройка materialize.min.js правильная. Это может быть другая проблема. Попробуйте сами, чтобы выяснить это самостоятельно:

  1. Проверьте, готов ваш javascript или нет 
<script>
$(document).ready(function(){
 console.log("Javascript is ready")
 $('.materialboxed').materialbox(); 
});
</script>

, если нет, добавьте это перед materialize.min.js 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
Проверьте, что у изображения есть class = "materialboxed" 
<img class="materialboxed" width="650" src="images/sample-1.jpg">
Ошибка говорит: .carousel не является функцией. Перепроверьте функцию карусели. Его следует называть так: 
$('.carousel').carousel();

и доступен класс = "карусель" 

<div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
...