jquerybootstrap-4datatablesbootstrap-modal

Can't populate modal using datatable row

Possible candidate for downvotes but at my wits end and need some help. I am trying to populate a Bootstrap modal when a cell in table row is clicked, by passing the entire row to function that populates modal body. I have tried every suggestion and none seem to work.

When I click the link, modal opens but only has the static texts and none of the values. I put breakpoints in the script and can see data row is passed correctly, labels are assigned values but when it opens they are all blank.

This is what I have (watered down version):

function bindDataTable() {
  tblICS2 = $("#ics2Table").DataTable({
    jQueryUI: true,
    data: [],
    dom: '<Blf<t>ip>',
    orderCellsTop: true,
    scrollY: 430,
    scrollCollapse: true,
    autoWidth: true,
    paging: true,
    "columns": [{
      "data": "UPUBCD",
      "render": function(data, type, row) {
        cellContent = "<span class=\"ml-2 rowDetail\"><a class=\"PageLink\" href='javascript:' title='Show Details' data-toggle='modal' data-target='#detailModal'>" + data + "</a></span>";
        //cellContent = "<span class=\"ml-2 rowDetail\"><a class=\"PageLink\" href='javascript:' title='Show Details'>" + data + "</a></span>";
        return cellContent;
      }
    }, {
      data: "OUTCOME"
    }, {}, {
      data: "ID"
    }],
    pageLength: 50,
    processing: true,
    deferRender: true,
  });
}

$('#ics2Table').on('click', '.rowDetail', function() {
  let rowData = $('#ics2Table').DataTable().row($(this).closest('tr')).data();
  showDetail(rowData);
});




function showDetail(rowData) {
  upu = null == rowData.UPUBCD ? '' : rowData.UPUBCD;
  outcome = null == rowData.OUTCOME ? '' : rowData.OUTCOME;
  id = null == rowData.ID ? '' : rowData.ID;

  $("#lblUPU").val(upu);
  $("#lblOutcome").val(outcome);
  $('#lbldetailModalTitle').text('Record detail ');

  // If I remove data-modal and data-toggle from renderer, then I uncomment these 2 lines

  //$('#detailModal').modal({ backdrop: 'static', keyboard: false });
  //$('#detailModal').modal('show');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="lbldetailModalTitle" style="z-index: 10000">
  <div class="modal-dialog modal-lg fade in" style="width: 50vw; max-width: 70vw; margin-top: 150px; margin-bottom: 100px">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          <label id="lbldetailModalTitle"></label>
        </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" style="background-color: #CCE5FF">
        <div id="divDetail">
          <div class="row">
            <div class="col-md-3 text-right font-bold-small mt-2">UPU:</div>
            <div class="col-md-2">
              <label class="font-small" id="lblUPU"></label>
            </div>
            <div class="col-md-3 text-right font-bold-small mt-2">Outcome:</div>
            <div class="col-md-3">
              <label class="font-small" id="lblOutcome"></label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <button class="btn btn-info" style="float: right" data-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • One issue is your render code will show the modal before it is populated Another is you use .val where you need to use .text

    1. remove data-toggle="modal" and data-target="#detailModal" by changing to this

      "render": (data, type, row) => `<span class="ml-2 rowDetail"><a
  class="PageLink" href="#" title="Show Details">${data}</a></span>`

    2. Grab, parse and open - you are already delegating the click so no need for the horrid href="javascript"

      $('#ics2Table').on('click', '.rowDetail', function() {
  let rowData = $('#ics2Table').DataTable().row($(this).closest('tr')).data();
  showDetail(rowData); // populate and then trigger
  $('#detailModal').modal({ backdrop: 'static', keyboard: false });
});

    3. Change to

      $("#lblUPU").text(upu);
$("#lblOutcome").text(outcome);
$('#lbldetailModalTitle').text('Record detail ');

    Why are you using label? Use a span instead