Close modal programmatically

[a2345sooted]

Is there any way to close a modal programmatically instead of adding the modal-close class to a button?

For instance, per the documentation, I have the following button in the footer of my modal:

<a click.delegate="doSomething()" md-button md-waves class="modal-action modal-close">Ok</a>

But, I want to do some validation in 'doSomething()' before closing the modal and prevent it from closing in some cases and close it in others. As is, 'doSomething()' runs, but the modal closes right away. I see there is an on complete delegate I can set, but that is too late!

Am I missing something or is this a missing feature?

Thanks.

[Thanood]

There is a jQuery function in Materialize which can close the modal:

$('#modal').closeModal();

Or, if you have a ref="myModal" on the modal, in your view model:

$(this.myModal).closeModal();

Then just leave out the modal-close class on the button. Does that work?

[a2345sooted]

No, I had been trying that earlier. I should have put that in my original post.

Regarding the JQuery method, in my view I have:

<a id="mt1" md-modal-trigger md-waves class="grey-text text-lighten-4 right sx-footer-link" href="#modal1">Ok</a>

...

<div id="modal1" class="modal" ref="myModal">
    <div class="modal-content feedback-modal-container">
      <h5>My Heading</h5>
      <md-input md-label="Blah blah..." md-text-area="true"></md-input>
    </div>
    <div class="modal-footer">
      <a click.delegate="cancelDialog()" md-button md-waves>Cancel</a>
      <a click.delegate="send()" md-button md-waves>Send</a>
    </div>
  </div>

than in my view model, i've tried all of these:

cancelDialog() {
    //$('#mt1').closeModal();
    //$('#modal1').closeModal();
    $(this.myModal).closeModal();
  }

All of those result in closeModal is not a function.

[a2345sooted]

I guess one possibility is I use the materialize jquery plugin and not use the aurelia bridge for just the modal... but I'm hoping we can resolve it before it comes to that

[Thanood]

Yes, you are doing it correctly. Materialize doesn't seem to be loaded in your view model (which is really strange). To confirm, can you try anything else Materialize-specific, f.i. trigger a toast?

Materialize.toast('I am a toast!', 4000);

Or log $.fn.dropdown in your view model.

It works here, btw: https://gist.run/?id=151a187da47d62e82419c5feca5c6ebf

[a2345sooted]

working on that now... for what it's worth, this is the only materialize import i have going on in my view model

import { MdToastService } from 'aurelia-materialize-bridge';

should i just import the whole component?

[a2345sooted]

Materialize.toast('I am a toast!', 4000);

works fine

[Thanood]

Well, you should import it somewhere (usually main.js) but you don't need to import it in every view model. And I guess you did because otherwise md-modal-trigger wouldn't work at all.

I wonder what this might be.. What's your setup? Are you using webpack or jspm? If jspm: did you get any warning about forks? And is jQuery 3 installed, by any chance? :smile:

Would you mind uploading a reproduction that I can clone and have a deeper look?

[a2345sooted]

lol, i actually have jquery 2.2.4 and jquery 3.1.0 installed

[a2345sooted]

here is part of main.js

 aurelia.use
        .defaultBindingLanguage()
        .defaultResources()
        .developmentLogging()
        .router()
        .history()
        .eventAggregator()
        .plugin('aurelia-animator-css')
        .plugin('aurelia-animator-velocity')
        .plugin('aurelia-dialog')
        .plugin('aurelia-kendoui-bridge', (kendo) => kendo.pro().notifyBindingBehavior())
        .plugin('aurelia-materialize-bridge', bridge => bridge.useAll())
        .plugin('aurelia-auth', (baseConfig) => {
           baseConfig.configure(config);
        });

[a2345sooted]

so, in my config.js, i did this:

//"jquery": "npm:jquery@3.1.0",
    "jquery": "npm:jquery@2.2.4",

and it works now.... i hope rolling back there doesn't break something else I have going on ! I'm still pretty new to aurelia and hacking my way to glory with an app... so I'll guess we'll see

[a2345sooted]

thanks for your help Thanood. Frankly, that's not the first time jquery 3 has got me, but yet I still don't seem to look at that first... when will I learn? !

[Thanood]

lol, i actually have jquery 2.2.4 and jquery 3.1.0 installed

That could be the reason. :smile: Could be that jQuery 3 is loaded and initialized, filled with Materialize functions and then jQuery 2 is initialized, overriding the first existing $ and thus deleting the Materialize references.

(or switch jQuery 2/3 in the example)

[Thanood]

Please try to get rid of jQuery 3 - I would have said "get rid of one of them" but I just know that Materialize is not compatible with 3 yet. :smile:

[a2345sooted]

i only had one version of jquery being used it looks like... i just have both 2.2.4 in my modules, but my config was only using 3... but now i've switched it to 2 and all is good

[Thanood]

:+1:

[a2345sooted]

appreciate your help man

[Thanood]

no problem, now I got another gist sample for my collection :wink:

[Thanood]

Please don't close this. I'd like to add a sample to the catalog.

Note to myself: add https://gist.run/?id=151a187da47d62e82419c5feca5c6ebf

[a2345sooted]

:)

also, coming from angular, and a little react, aurelia is badass... i'm in love..

no problem, i'll leave it open

[Thanood]

http://aurelia-ui-toolkits.github.io/demo-materialize/#/samples/modals/manual-close