jquery - Can't populate modal using datatable row - Stack Overflow

admin管理员组

文章数量:1289565

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=".7.1/jquery.min.js"></script>
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="/[email protected]/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>

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/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/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>

• jquery
• bootstrap-4
• datatables
• bootstrap-modal

Share Improve this question Follow edited Feb 21 at 7:05 mplungjan 178k2828 gold badges181181 silver badges240240 bronze badges asked Feb 21 at 6:22 NoBullManNoBullMan 2,18866 gold badges5252 silver badges107107 bronze badges 2

• I made you a runnable snippet. Please add the relevant HTML for the data table – mplungjan Commented Feb 21 at 7:05
• You are trying to use .val() on label elements there - those do not have a value. You'd need to set their text content or innerHTML instead. But since you are not using them as descriptors for any form fields, those should rather not be label elements in the first place. – C3roe Commented Feb 21 at 7:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

本文标签： jqueryCan39t populate modal using datatable rowStack Overflow