Materialize: does not work initialization modal

[rasxod]

<div id="data_modal" class="modal"> 
    <div class="modal-content"> 
        <h4>Modal Header</h4> 
        <div class="row">
            <div class="col l12">
                A bunch of text 
            </div>
        </div>
    </div> 
    <div class="modal-footer"> 
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="save_frame">Сохранить</a> 
    </div> 
</div>

md5-0e61fae6f34b7df3c7504aa5f219cd91

===error

Uncaught TypeError: Cannot read property 'open' of undefined
at _show_data_modal (lm=doc_edit&did=1:183)
at eval (eval at success (scripts.js?v1522782874:20), :1:1)
at Object.success (scripts.js?v1522782874:20)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest. (jquery-3.2.1.min.js:4)

[Dogfalo]

You have to call getInstance on the DOM Element not the jQuery wrapper on the element.

[rasxod]

I decided it was easier
just added

$(document).ready(function(){
    $('#data_modal').modal();
});

[socareta]

we have same issue
Modal

Modal Header

A bunch of text

Agree

i have founded error "Uncaught TypeError: Cannot read property 'open' of undefined"

[Dogfalo]

@socareta You didn't initialize the modal

[socareta]

var elem= document.querySelector('.modal');
var instance = M.Modal.init(elem, '');
M.Modal.getInstance(instance).open();
finally modal working with same error

[Dogfalo]

https://codepen.io/Dogfalo/pen/xYXwoe

[socareta]

thank you so much, we have been tried using single html and working. but we use vue js. still have same error.

[Dogfalo]

https://vuejs.org/v2/api/#mounted

[socareta]

great..now working...thanks

[OlleOlsson92]

@socareta How did you solve it? The link provided by Dogfalo didn't really help me understand. Im trying to create an instance so I can call 'instance.close();' when button pressed in modal.

[socareta]

@jullemeister i am try use var elem= document.querySelector('.modal'); var instance = M.Modal.init(elem); onclick="instance .open()"

[david-saint]

@Dogfalo
I tried this
console.log(M.Modal.getInstance(document.getElementById('loginModal')));
but I got undefined

[david-saint]

@Dogfalo Nevermind I didn't put it in the DOMContentLoaded event listener

[dgzraul]

You can use this

Get element by ID
var elems = document.getElementById('idDivModal');

The next method is OPTIONAL

With this method you can reconfigure your DIV MODAL and you can add more options

var instances = M.Modal.init(elems, { 
   opacity: 0.5
});

New instance
var instance = M.Modal.getInstance(elems);
instance.open(); // instance with methods