Materialize: TypeError: this.M_Modal is undefined

[ghost]

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.

[ghost]

This happened on Chrome:
Uncaught (in promise) TypeError: Cannot read property 'close' of undefined at HTMLDivElement.<anonymous> (materialize.min.js:6) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.t.fn.modal (materialize.min.js:6) at welcome.html:102 at Array.forEach (<anonymous>) at welcome.html:97

The code Chrome indicates on welcome.html:
$('#verifyemail').modal("close");

[ebrowz]

I am also facing same issue when i am trying to open modal.
$('#modal1').modal("open");

[DanielRuf]

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

[DanielRuf]

Please provide codepens.

[memborsky]

Code Pen example

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.

[Dogfalo]

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

On Mon, Aug 7, 2017 at 10:54 AM, Matt Emborsky [e-mail]
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.

[DanielRuf]

@memborsky don't forget the modal-trigger class https://codepen.io/anon/pen/jLBPyj

[ebrowz]

Thank you very much... After initialization it's working now.

[AudeB]

Hello,
It's not working for me. I do not understand. with jquery it does not work.
I have a link that makes an ajax call to load on-the-fly data into a modal.
I have an ajax call, in done(), I add, in the dom, a div with the html content with id #exemple_modal.
Then I do:
$('#exemple_modal').modal({dismissible: true, opacity: 0.5});
then:
$('#exemple_modal').modal('open').
I have TypeError error: this.M_Modal is undefined

==> the solution is in the comment with the header: "Final code: it's work fine"

[DanielRuf]

@AudeB which version do you use? Can you provide a codepen?

[AudeB]

@DanielRuf In fact, I forgot to give you the version.
the latest beta release v0.100.2 and Jquery 1.12

[DanielRuf]

Can you provide a codepen?

Also why 1.12?

[AudeB]

this is a corporate portal. we are on IE 9, in migration to Edge.
you think this is what blocks modal? jquery 1.12 ?
yet the process is simple: adding div in the html code with an id. on this id we apply modal ('open').
I'll get back to it tomorrow morning

[DanielRuf]

https://codepen.io/anon/pen/xXdKwp jQuery 3
https://codepen.io/anon/pen/gGWYay jQuery 1

Both work, please check your markup and code.

[AudeB]

https://codepen.io/anon/pen/GMmKWa don't work
TypeError: this.M_Modal is undefined - materialize.min.js:6:67672

[DanielRuf]

There is no modal in your codepen. Just an alert.

[AudeB]

oops it had not saved the last version. it must be good now
https://codepen.io/anon/pen/GMmKWa
TypeError: this.M_Modal is undefined - materialize.min.js:6:67672

=> For later, if the codepen is no longer available :
js included :
https://code.jquery.com/jquery-1.12.4.min.js
//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js

css included :
//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css

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" style="display:none;"><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('open');
        });
    });
});

[DanielRuf]

You just call .modal('open') but the .modal() initialization is missing.

[Dogfalo]

Also from the documentation

In order for the modal to work you have to add the Modal ID to the link of the trigger.

Take a look at the modal example

[DanielRuf]

Also from the documentation

In order for the modal to work you have to add the Modal ID to the link of the trigger.
Take a look at the modal example

This is optional as it seems.

[AudeB]

I updated the codepen with the id of the future window in the link's href and added the modal-trigger class and called the modal () function before modal ('open')
So I do not have the same error again, but it still does not work.
I have the overlay, and the content of the modal div, but the css is not applied
https://codepen.io/anon/pen/GMmKWa

=> For later, if the codepen is no longer available :
js included :
https://code.jquery.com/jquery-1.12.4.min.js
//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js

css included :
//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css

html :

<a href="#exemple_modal" class="waves-effect waves-light btn explore modal-trigger ">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" style="display:none;"><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();
          $('#exemple_modal').modal('open');
        });
    });
});

[DanielRuf]

Where is the class modal?

[DanielRuf]

The trigger is not needed as you build your own in your .click event handler.

[AudeB]

ok I understood. I had forgotten the class "modal" in the loading of the new div #model_example

js final :

$( 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" style="display:none;"><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();
              $('#exemple_modal').modal('open');

          });
      });
       return false;
    });

It works now correctly to open the modal.
but if it is opened and closed several times in succession - twice in succession is enough - the overlay remains. an idea ?

Codepen updated :
https://codepen.io/anon/pen/GMmKWa

[DanielRuf]

And remove the unnecessary inline style, modals are already hidden by default.

[AudeB]

ok, it's the modal-trigger class on the link that was problem with the overlay

[DanielRuf]

Remove the trigger and href because this adds a second onclick eventlistener.

https://codepen.io/anon/pen/WZjRGE

[AudeB]

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;
    });

[DanielRuf]

Still href="#exemple_modal is not needed, replace it with href="#"

[DanielRuf]

Ah, now the code is correct =)

[AudeB]

yes I modified after posting

[mbambadev]

Hello to all of you I am a programmer, it's quite confusing when you're used to bootstrap. Why explicitly boot the modal, why not invoke the modal once. Is the DRY principle respected with that?

[DanielRuf]

@mbambadev please create a new issue. You can also invoke it for all elements with the class. Materialize v1 does not initialize all at start.