Bootstrap Modal not working for me (Ember JS)

Question

I am trying to use Bootstrap for ember addon https://github.com/ember-addons/bootstrap-for-ember , but not all settings work for me. For example, when I try to use simple alert functions, it works for me, but when I try to use a modal action with the click of a button, I get this error:

Uncaught Error: Nothing handled the action 'didAlertClose'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble. 

here is the code for the modal inside the template:

 <script type="text/x-handlebars" id="cards/index"> {{bs-button title="Show Modal" clicked="show"}} {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}} <p>Modal content!</p> {{/bs-modal}} </script> 

I use the following versions: handlebars 1.3.0 jquery 1.9.1 ember 1.3.1

I use chrome on ubuntu 12.04.

And this is the hierarchy of the included files:

 <!--Alert component --> <script src="dist/js/bs-alert.min.js"></script> <script src="dist/js/bs-basic.min.js"></script> <script src="dist/js/bs-button.min.js"></script> <script src="dist/js/bs-modal.min.js"></script> <script src="js/app.js"></script> 

Does anyone know how I can solve this problem?

Answer 1

It is necessary to implement the "Show" action in the controller, and the controller name must be correct (depends on the name of the router / template). Here is my code: Template code:

Template Code:

 {{bs-button title="Show Modal" clicked="show"}} {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}} <p>Modal content!</p> {{/bs-modal}} 

Controller Code:

 Cards.CardsController = Ember.ObjectController.extend({ myModalButtons: [ {title: 'Submit', clicked: "submit"}, {title: 'Cancel', clicked: "cancel", dismiss: 'modal'} ], actions: { changeClass: function() { this.set('isActive', !this.get('isActive')); } }, isActive: false }); Cards.CardsIndexController = Ember.ObjectController.extend({ myModalButtons: [ {title: 'Submit', clicked: "submit"}, {title: 'Cancel', clicked: "cancel", dismiss: 'modal'} ], actions: { show: function() { return Bootstrap.ModalManager.show('myModal'); }, submit: function() { Bootstrap.NM.push('Successfully submitted modal', 'success'); return Bootstrap.ModalManager.hide('myModal'); }, //Cancel the modal, we don't need to hide the model manually because we set {..., dismiss: 'modal'} on the button meta data cancel: function() { return Bootstrap.NM.push('Modal was cancelled', 'info'); } }, isActive: false });