I am utilizing bootstrap 5.1 alerts to display custom messages after an Ajax call. I also want the ability to dismiss the alert as necessary, which can be done with a dismiss button provided by bootstrap.
Below is the PHP code I am using :
<div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
And here is the relevant JavaScript for handling the Ajax response :
document.getElementById("message-response-given").innerHTML = res.message;
$('#message-response-given').fadeIn();
This successfully displays the message but does not show the dismissal button after the Ajax call.
I have gone through this information (bootstrap alerts, same link as above) :
Once an alert is dismissed, it is completely removed from the page structure. This may cause issues for keyboard users since their focus will shift suddenly and might reset to the beginning of the page depending on the browser. To address this, it's recommended to include additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most suitable location in the page. If you intend to move focus to a non-interactive element that doesn't usually receive focus, remember to add tabindex="-1" to the element.
However, I am unsure how to implement this....