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

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.

htmlasp.netvb.netvisual-studiobootstrap-4


Solution 1:[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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">&times;</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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions