materialize: TypeError: this.M_Modal is undefined

Hello. I was using materializecss version 0.98.2 without a problem on my project. But with all newer versions (0.99 to 100.1) I’m facing with this error:

TypeError: this.M_Modal is undefined materialize.min.js:6:67443

This problem appears only on Firefox. Clearing website data solves problem but it reappears again.

Since I widely use materializecss widely on my project, I can’t figure out which code causes this problem. Because this problem appeared with an update, I ask from here instead of Stackoverflow. Sorry if I shouldn’t have.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 33 (18 by maintainers)

Most upvoted comments

Final code : it’s work fine

thank you for your patience and help 😃

html :

<a href="#!" class="waves-effect waves-light btn explore ">test</a>
<div class="load_exemple"></div>

js :

$( document ).ready(function() {
      
      $('a.explore').click(function(){

          $.ajax({
            url: "https://httpbin.org/get"  
          })
            .done(function( data ) {
            
              $('.load_exemple').html('');
              $('.load_exemple').append('<div id="exemple_modal" class="modal"  ><div class="modal-content">CONTENU MODAL</div><div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a></div></div>');
              $('#exemple_modal').modal({dismissible: true, opacity: 0.5});
              $('#exemple_modal').modal('open');
            
          });
      });
       return false;
    });

AudeB on Sep 28, 2017

The class modal-trigger is required now. https://codepen.io/Dogfalo/pen/qXrdNr

On Mon, Aug 7, 2017 at 10:54 AM, Matt Emborsky notifications@github.com wrote:

Code Pen example https://codepen.io/memborsky/pen/zdZxjg

Disclaimer: I am using VueJS within this code pen but nothing it is doing is effecting the operation of the modal issue.

Version 0.100.1 and 0.100.0 both cause the issue of a modal not being able to be triggered ‘open’ without explicitly calling $(el).modal(‘open’), as I have built it in the code pen above. If you fork it and do nothing but change the Materialize JS version from 0.100.1 to 0.99.0, all the methods of opening the modal will work.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Dogfalo/materialize/issues/5072#issuecomment-320734084, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpax98uU-QeDZ0UGErL4ot98iaOvdsoks5sV09dgaJpZM4OublK .

– Doggy sends his greetings from Mars.

Dogfalo on Aug 7, 2017

Did you initialize the modal first? The code has changed. You have to call .modal(options) before calling .modal('open/close').

DanielRuf on Aug 7, 2017