Why am I getting this error when I try to open Materialize Modal?

Question

I am trying to display some football fixtures but I am struggling with opening Modals. In each game from each week I want to open one modal where I should display more informations about the respective game. But I get an error in console every time I press any button that should open the modal outside the very first button created. In the Inspect menu I can see that the modals are created and for each modal exist one unique button. But the modals are not displayed on the screen.

Console error

Uncaught TypeError: Cannot read property 'open' of undefined
at HTMLDivElement.<anonymous> (materialize.js:1146)
at Function.each (jquery-2.1.1.min.js:2)
at n.fn.init.each (jquery-2.1.1.min.js:2)
at n.fn.init.jQuery.fn.<computed> [as modal] (materialize.js:1144)
at HTMLAnchorElement.onclick (VM3532 etapa:274)
(anonymous) @ materialize.js:1146
each @ jquery-2.1.1.min.js:2
each @ jquery-2.1.1.min.js:2
jQuery.fn.<computed> @ materialize.js:1144
onclick @ VM3532 etapa:274

PHP code where I echo the modal

$i = 1;
$j = 1;
foreach ($games as $rounds) {
    echo "<div id='et$i' class='tabcontent'>";
    echo "<ul class='collection'>";

    foreach ($rounds as $match) {
        echo "<li class='collection-item'>";
            echo "<div class='row'>";
            echo "<div class='center col s4'>{$match[1]}</div>";
            echo "<div class='center col s1'>-</div>";
            echo "<div class='center col s4'>{$match[0]}</div>";
            echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal('open');\"> <i class='material-icons'>assessment</i> </a>";
            echo "</div>";

            echo "<div id='modal$j' class='modal'>";
            echo "<div class='modal-content'>";
            echo "<div class='row'>";
            echo "<div class='center col s4'>$match[1]</div>";
            echo "<div class='center col s1'>-</div>";
            echo "<div class='center col s4'>$match[0]</div>";
            echo "</div>";

            echo "</div>";
            echo "</div>";
        echo "</li>";
        $j++;
    }
    echo "</ul>";
    echo "</div>";
    $i++;
}

JorisJ1 · Accepted Answer · 2019-08-08T19:38:46.460

0

Using Laravel's default app.css and app.js your code works when you remove the word 'open'

echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal('open');\">

becomes

echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal();\">

Edit: In another answer someone mentions that the modals have to be initialized first, for example by using this snippet:

<script>
    $(document).ready(function() {
        $('#modal1').modal();
    });
</script>

edited Aug 08 '19 at 19:38

answered Aug 07 '19 at 17:21

JorisJ1

922
2
12
22

If I remove the 'open' part, I won't get any error when I click the button that open the modal but the first modal will not open . – Negura Alexandru Aug 08 '19 at 18:27
The block of code you show is very big. Could you please provide a minimal example that still has the same problem? Also, how are you using the Materialize library, through NPM or Sass or another way? And are you using any other JS libraries alongside Materialize? – JorisJ1 Aug 08 '19 at 18:38
I have changed this: 'echo " ";' into this: 'echo " ";' And now I don't get that error anymore, but the modals still not opening. I've included the Materialize CDN and install the Materialize files from their site. – Negura Alexandru Aug 08 '19 at 18:58
The error is in the materialize.js on the 'instance[methodOrOptions]' line // Void methods return this.each(function () { var instance = this[classRef]; instance[methodOrOptions].apply(instance, params); }); – Negura Alexandru Aug 08 '19 at 19:20
I expanded my answer. To get the first Modal example on [this page](https://materializecss.com/modals.html) to work I had to initialize the modal first. – JorisJ1 Aug 08 '19 at 19:38
THis worked partially. If I hard-code the initialization for every modal they are gonna to open. Now I need to initialize dinamically every modal as I create every one of them. Can you suggest me how can I do this? Every modal is created with #modal$j id. I need to transfer that $j from php to javascript? – Negura Alexandru Aug 08 '19 at 20:37
You can place PHP code inside – JorisJ1 Aug 09 '19 at 06:08

Why am I getting this error when I try to open Materialize Modal?

Console error

PHP code where I echo the modal

1 Answers1