Ember-bootstrap to trigger modal from javascript

Question

From the link here if you scroll down to the example with the button label 'Reopen Modal' They seem to be triggering the modal from javascript. I have tried Ember.$('.modal).modal('show') with no luck, and cant seem to figure out a way to trigger it from js.

My goal is, after a user submits a form and it is successfully validated, the modal appears.

Template

{{#bs-form model=register onSubmit=(action 'submit') novalidate=true as |form|}}
  {{form.element controlType="text" label="Username" placeholder="Username" property="username"}}
  {{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
  {{bs-button defaultText="Submit" type="outline-success" buttonType="submit"}}
{{/bs-form}}

{{#bs-modal-simple open=modal1 title="Modal" renderInPlace=true}}
    This is a Modal.
{{/bs-modal-simple}}

Component

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit() {
      Ember.$('.modal').modal('show');
    },
  },
});

score 2 · Accepted Answer · answered Mar 01 '17 at 02:11

2

No. The modal would be shown by a boolean property.

actions: {
    submit() {
      this.set('modal1', true);
    },
  },

answered Mar 01 '17 at 02:11

Ebrahim Pasbani

9,168
2
23
30

Thank you, that did it. I spent some time searching for something just that simple. I appreciate it. – Eric Goncalves Mar 01 '17 at 02:16

Ember-bootstrap to trigger modal from javascript

1 Answers1