Just call one Bootstrap toast, with a unique id, and I can do it. But:
- I would have multiple Buttons, all reference to the same Toast message. And trigger I thought, a class call? In my JS script. I don’t know what to call them as a class.
I know, I could not call them via id (getElementById). Because the id has to be unique. So shortened my question to clarify it more: many buttons to 1 and the same Bootstrap toast message.
- The method from Bootstrap examples triggers via
id=""then every id has to be unique. How could I make a list of all the IDs I want to trigger? So if I would call to unique id “” it must give in the script a map or a loop from a variable alright?
Maybe I oversee some explanation on the Bootstrap site, on how to group buttons into one toast message.
Here is my example code from the Bootstrap site:
Buttons
<button type="button" class="btn btn-primary" id="id1ToAList">Show live toast</button>
<button type="button" class="btn btn-primary" id="id2ToAList">Show live toast</button>
<button type="button" class="btn btn-primary" id="id3ToAList">Show live toast</button>
divs for the container:
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
and all I would trigger with a JS script, as a given list which id to execute or map.
Experimented a little with
const toastTrigger = document.querySelectorAll('*[id]')
<script>
const toastTrigger = document.getElementById('trigger my list here') // or trigger as a class all buttons to one toast message
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
toastTrigger.addEventListener('click', () => {
toastBootstrap.show()
})
}
</script>
New contributor
al-naba project is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This seems to stem from a misunderstanding of how to add event listeners. All you need to do is add multiple event listeners – one per button.
// these are the three buttons that we'll be using as toast triggers
const toastTrigger1 = document.getElementById('id1ToAList')
const toastTrigger1 = document.getElementById('id2ToAList')
const toastTrigger1 = document.getElementById('id3ToAList')
const toastLiveExample = document.getElementById('liveToast')
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
// all these "if" checks do is check whether toastTrigger1 is not null. It protects against the case where you mistyped "id1ToAList" above, or if for some reason that element didn't exist on the page.
if (toastTrigger1) {
toastTrigger1.addEventListener('click', () => {
// this block is the code that runs when the 'click' event happens on toastTrigger1.
// You can add more stuff in here if you want additional things to also happen when toastTrigger1 (your first button) is clicked
toastBootstrap.show()
})
}
if (toastTrigger2) {
toastTrigger2.addEventListener('click', () => {
toastBootstrap.show()
})
}
if (toastTrigger3) {
toastTrigger3.addEventListener('click', () => {
toastBootstrap.show()
})
}
Once you understand that, if you’d always like the buttons to do the same thing, you can use querySelector and loop through the elements.