How to make string builder append button that shows a hidden modal - html

Question

I'm trying to append a button using a string builder to append the button in a placeholder
the button will be appended depending on a value on the data table
button append works fine but the functionality of the button to un-hide a modal is not working!
this is what I'm trying to do
https://getbootstrap.com/docs/4.0/components/modal/#vertically-centered
here is what I've tried
page.aspx
<div class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
page.vb
Dim dt As DataTable = Me.GetData()
'Building an HTML string.
Dim html As New StringBuilder()
For Each row As DataRow In dt.Rows
html.Append("<tr>")
For Each column As DataColumn In dt.Columns
html.Append("<td>")
html.Append(row(column.ColumnName))
If column.ToString = "Order_ID" Then
oid = row(column.ColumnName)
End If
html.Append("</td>")
Next
status_text = sql.GetOrderStatus(oid)
html.Append("<td>")
If status_text = "Done" Then
html.Append("<div class=""d-flex align-items-center gap-3 fs-6"">")
html.Append("<button type=""button""
class=""btn btn-primary""
data-toggle=""modal""
data-target="".bs-example-modal-lg""
data-whatever=""mdo""></button>")
html.Append("</div></td>")
Continue For
End If
Button appended successfully but not showing the dialog.

Answer 1

This code was lifted from the BS4 docs and modified to use your button.
Make sure your rendered html renders similarly to the html in the snippet below.
$('.bs-example-modal-lg').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var whatever = button.data('whatever')
var modal = $(this)
modal.find('.modal-body p').text(whatever)
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<button type="button" class='btn btn-primary' data-toggle='modal' data-target='.bs-example-modal-lg' data-whatever='mdo'>modal activate</button>
<div class="modal bs-example-modal-lg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>