CODEWITHSUNDEEP
javascriptember.js
Ben Aubin
Ben Aubin

Reputation: 5657

Action not being sent from component in EmberJS

When I close a bootstrap modal, it doesn't send the action it should (in application js:)

application.hbs:

<li><a {{action "showSignInModal"}}>Sign In</a></li>
{{outlet}}
{{outlet 'modal'}}

bootstrap-modal.js:

this.$('.modal').modal().on('hidden.bs.modal', function() {
  alert("Closed");
  this.sendAction('removeModal');
}.bind(this));

routes/application.js:

export default Ember.Route.extend({
  actions: {
    showSignInModal: function() {
      this.render('components.signin-modal', {
        into: 'application',
        outlet: 'modal'
      });
    },
    removeModal: function(){
      alert("Working")
    }
    //...
  }
})

signin-modal.hbs:

{{#bootstrap-modal title="Sign In" ok='signin' okText="Signin"}}
<p>
  Please sign in. Thanks!
</p>
{{/bootstrap-modal}}

The "closed" alert shows, but the "working" alert doesn't. (The signin modal is a component, with no actions defined, and is just a bootstrap-modal)

Upvotes: 1

Views: 36

Answers (2)

nem035
nem035

Reputation: 35481

You are not passing your action name properly.

You need to be aware that the sendAction method will fail silently if it can't find the action name.

Make sure inside your template that contains the modal component, you pass a property with the action name you want to call:

{{#bootstrap-modal title="Sign In" ok='signin' okText="Signin" removeModal="removeModal"}}

You can read more about Passing Actions to Components

Upvotes: 1

SuperUberDuper
SuperUberDuper

Reputation: 9623

Actions won't propagate like event bubbing

Wrap your bootstrap modal into a component and give it the removeModal action from the signin-modal to call.

Upvotes: 1

Related Questions