Ember bootstrap toasts

Questions
1

I try to get the toasts working from bootstrap.

I installed ember-jquery and add this to my template:

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

In my controller I have the following code:

@action
  async sendAttest(subscription) {
    jQuery('.toast').toast('show');

  }

I get the following error:

Uncaught (in promise) TypeError: (0 , _jquery.default)(…).toast is not a function

2

Sounds like you don’t have the bootstrap javascript or toast plugin(?) correctly initialized. How are you adding bootstrap to the app?

3

Bootstrap is added with its dependencies to the devDependencies section of package.json

“bootstrap”: “^4.3.1”, “popper.js”: “^1.16.1”, “jquery”: “1.9.1 - 3”

And as toast is a part of the Bootstrap library (Toasts · Bootstrap v5.0) I do not know what else I could add?

Did I forget something?

4

The way Ember is currently built (there’s a big project underway called Embroider that will overhaul the build system to use webpack or rollup and improve a lot of the ergonomics around this stuff) it is only aware of ember addons and not arbitrary javascript modules. Ember auto import can help for loading “non-Ember” dependencies, or the “classic” way is to just import the files in your ember-cli-build.js file so they are included in the build. That would look something like:

// ember-cli-build.js
  ...
  app.import('node_modules/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
  app.import('node_modules/jquery-ui/ui/slider.js');
  app.import('node_modules/quill/dist/quill.min.js');
  ...

(that’s just an example, you’ll want to reference the exact files you’re targeting)