Dot "modal" function is not available for the element selected / Ember / Bootstrap

Question

I'm using Ember-CLI 0.2.7, I use ember-bootstrap in my project: https://www.npmjs.com/package/ember-bootstrap

My application.hbs:

<h2 id="title">Welcome to Ember.js</h2>
{{view "inactivityWarning"}}
{{outlet}}

I have a route named: login. My login.hbs:

<h2>Login</h2>
<button class="btn btn-lg btn-primary" {{action "showModal"}}>
  <span class="glyphicon glyphicon-cog"></span> Log Me In!
</button>

My login controller:

import Ember from 'ember';
export default Ember.Controller.extend({
  actions: {
    showModal: function() {
      console.log($("#myModal"));
      console.log($("#myModal").element);
      $("#myModal").modal('show');
    }
  }
});

My inactivityWarning view:

import Ember from 'ember';
export default Ember.View.extend({
  templateName: 'views/inactivity-warning'
});

My inactivityWarning template:

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
            <p>Do you want to save changes you made to document before closing?</p>
            <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

I clicked the button, error: Uncaught TypeError: $(...).modal is not a function

I checked the console, and inspect the object printed by console.log($("#myModal"));, I couldn't find the 'modal' function there:

enter image description here

I compared it with the example code (non-ember, plain html+js) I copied from http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php , and I can see 'modal' in the list of fuctions it owns by the selected element.

enter image description here

I don't understand, why the difference? I checked the .bower.json under bower_components/boostrap/ in my ember project, I could see it is version 3.3.4, just like the one used by the example in tutorialrepublic.

Is ember-bootstrap using a 'modified' version of bootstrap 3.3.4 (taking out some functions that maybe is not supported yet, such as dot modal) ?

What if I just forget ember-bootstrap, and use bootstrap directly in my ember (I don't need the emberish bootstrap component for now). How to do that?

UPDATE

In order to use "vanilla boostrap" (without embery component), I switched to https://github.com/lifegadget/ember-cli-bootstrap-sassy

Now I can see the .modal function in the list.

enter image description here

However, now I'm having a different problem.... the which is supposed to be hidden initially... is shown from the beginning. As if it cannot find the definition for the class 'modal'... I suspect ember-cli-bootstrap-sassy install guide is not complete. Anybody knows how to get it right?

Thanks, Raka

Cokorda Raka Cokorda Raka · Accepted Answer · 2015-06-03T22:49:29

Ok,

I followed the most basic suggestion from ember-cli guide here: http://www.ember-cli.com/asset-compilation/ :

bower install bootstrap --save

In Brocfile.js add the following:

app.import('bower_components/bootstrap/dist/css/bootstrap.css');

The guide forgot to mention that it's important to put this as well in the Brocfile.js:

app.import('bower_components/bootstrap/dist/js/bootstrap.js');

With that, now I have my (boostrap) modal dialog in my ember app.

Dot "modal" function is not available for the element selected / Ember / Bootstrap

UPDATE

1 Answers