CODEWITHSUNDEEP
javascriptcsselixirphoenix-framework
zaire crypto
zaire crypto

Reputation: 45

How to setup materializecss javascript in Phoenix elixir webapp

I'm trying to use materizecss javascript jquery features, but I'm getting below error message In the browser.

Error message: Uncaught TypeError: $(...).carousel is not a function

Any idea how to properly setup javascript? Where to put <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>?

For the example I'm trying to implement, it the Material Box for media (https://materializecss.com/media.html),

In my project, I put <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> and 

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

at the end of app.html.eex, right before </body>

In my .eex.html where I'm showing the image, I showing the image, I used something similar to img_tag(user.photo_path, class: "materialboxed")

Upvotes: 1

Views: 196

Answers (1)

Minh-Khang
Minh-Khang

Reputation: 444

Your materialize.min.js setup is correct. It could be other problem. Try do some to find out by yourself:

  1. Check your javascript is ready or not
<script>
$(document).ready(function(){
 console.log("Javascript is ready")
 $('.materialboxed').materialbox(); 
});
</script>

if not, add this before materialize.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  1. Check the image has class="materialboxed"
<img class="materialboxed" width="650" src="images/sample-1.jpg">
  1. Error say: .carousel is not a function. Recheck function carousel. It should be called like this:
$('.carousel').carousel();

and class="carousel" is available

<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>

Upvotes: 2

Related Questions