Can not access bootstrap methods in scripts

[jmdiazlr-sys]

I am trying to add a map location selector, with some inline javascript in address-form.tpl, I put the map in a bootstrap modal. I added two buttons to cancel or accept the locations set by user, in the accept button onclick event handler I collect the coordinates, and try to hide the modal with:

var modal = bootstrap.Modal.getInstance(myModalEl);
modal.hide();

but script fails in first line with:

Uncaught ReferenceError: bootstrap is not defined

I tried many comments from google and nothing works. Seems like bootstrap javascript not added to page, but do not know how to confirm not correct this.

PS 9.0.1

Thanks

[jmdiazlr-sys]

I added in head.tpl :

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

Now my script works, but noted an error in browser console:

Uncaught TypeError: can't access property "hide", _t.getInstance(...) is null
 <anonymous> https://192.168.1.75/themes/dilar/assets/js/theme.js:5

So I removed the modification from head.tpl to not disturb anything else.

[tblivet]

Hi @jmdiazlr-sys,

I think this issue is out of context. Are you trying to do this for your own purposes and inside the address-form.tpl file of Hummingbird?

This kind of customization should generally be handled on your side. For your information, you can use the Bootstrap Modal by importing it:

import { Modal } from 'bootstrap';

This should allow you to call Bootstrap methods such as Modal.getInstance, and so on.