Materialize: Modal Ready function not firing in v0.99

[stap123]

Description

It appears that the ready function of a modal has been broken in the new release. The alert fires when using 98.1 but not when using 99.0.

Repro Steps

See this fiddle for the existing one using v0.98.1 https://jsfiddle.net/nx429bfg/1/

See this fiddle for the new one V0.99 https://jsfiddle.net/9o51s3v6/1/

[myrp-leonardo]

Here too.
Modal setup was broken (or updated).
Now seems you need to use like this:

$(document).ready(function() {
  $('#modal1').modal("open", {
    ready: function() {
      alert('hi');
    }
  });
});

[stap123]

That does seem to work, but does that mean that in order to trigger a modal open I have to also pass the options in again every time an open/close method is called? That seems like a backwards step.

[DanielRuf]

Clicking on the button triggers it: https://codepen.io/anon/pen/QgMVXL

[DanielRuf]

Clicking on the button triggers it: https://codepen.io/anon/pen/QgMVXL

Please also check https://codepen.io/anon/pen/JJymdO.
It should solve your problem. I will create a PR for this fix if this solves the issue.

[stap123]

The final solution seems to solve the issue (https://codepen.io/anon/pen/JJymdO). Many thanks for the responses.

[DanielRuf]

@inventti-leonardo does it solve the issue on your side too?

[myrp-leonardo]

👍

[storm1er]

related to https://github.com/Dogfalo/materialize/issues/4932

[DanielRuf]

@tomscholz can you verify too, that this solves it? If yes I'll create the PR.

[vladimirmyshkovski]

Hey.
It seems a bug with modal in the materialize 0.100.0

            <ul class="left">
              <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
              <li class="hide-on-med-and-down"><a href="#modal1" class="modal-trigger"><i class="material-icons">search</i></a></li>
            </ul>
            <ul class="right">
            <li class="hide-on-large-only"><a href="#modal1" class="modal-trigger"><i class="material-icons">search</i></a></li>
              <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
            </ul>

      <!-- Modal Structure -->
      <div id="modal1" class="modal bottom-sheet">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '50%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); }, // Callback for Modal close
    }
  );
});

I made about a thousand attempts to understand in which cases I worked, and in which I did not.

I tested with one trigger, and with two, as in the example.

I checked with$ (document) .ready ({}), and without,

I raised above * .js, putting it in the head, and lowered it down, putting in front of </ body>

I cleaned the properties, leaving only a function, and tried with them, as in the example.

Every time I get the same.

The error lies in the fact that I periodically receive an error: TypeError: document.getElementById (...) is null

If I reload the page, sometimes the window opens the first time, sometimes it opens 3 times in a row, then it does not open at all, and for every click on the trigger, I get this error.

Sometimes I click on one button and it does not work at all (does not trigger the click), then I click on the second button and the window opens, after which I press the first button again, and this time I get an error.

I do not know how to fix this.

I see that in the examples above the button works fine, but I do not always have it. If it did not work at all, then I would have thought about anything, but it works in one session of the browser, then it does not.

I also thought about the fact that some other, lower connected * .js file overlaps my file with the script, but I also could not find it.

Even if there are lower connected files, why does the bind be reset after closing the window?

UPDATE

I just connected version 0.99, and everything works as expected. Without a single mistake. I reloaded the browser 5 times, clicked on both buttons in turn, and everything works perfectly.

This is a 100% bug in version 0.100.0

I can send you my files so you can make sure that it's true.

[Dogfalo]

There is a current bug, where the <i> tag interferes with the modal button
see: https://github.com/Dogfalo/materialize/issues/4987
We will have a hotfix release out soon

Add pointer-events: none to the <i> element to temporarily fix this bug