One way to display a bootstrap toast is by using the following code snippet:
let my_toast = new myToast('title', 'hello world');
my_toast.show();
Currently, I am loading the HTML content from an external file named myToast.html:
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<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">
<div id="toast-title">
Bootstrap
</div>
</strong>
<small><div id=""></div></small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div id="toast-body" class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
By adding this HTML content to a
<div id="mydiv"></div>Tost.show() method:
<script>
class myToast{
toast_html;
constructor(title, message) {
this.title = title;
this.message = message;
let template_html;
$.ajax({
async: false,
type: 'GET',
url: "myToast.html",
success: function(data) {
template_html = data;
}
});
let toast_div = document.createElement("div");
toast_div.id = "toast_wrapper";
toast_div.innerHTML = template_html;
toast_div.querySelector("#toast-title").innerHTML = (this.title);
toast_div.querySelector("#toast-body").innerHTML = (this.message);
this.toast_html = toast_div;
}
}
let to = new myToast('title', 'hello world');
$("#mydiv").append(to.toast_html);
var toastLiveExample = document.getElementById('liveToast');
var toast = new bootstrap.Toast(toastLiveExample);
toast.show();
</script>
Is there a more efficient or concise solution available?