I've got a basic bootstrap-table displayed. When I click on a cell, I'd like a modal to open with the deviceId of that row, and the results of the "function" cell. If there is nothing in the "function" cell, the modal would still load and allow me to enter data for that cell. Once the modal is open, I'd like to either edit and then save the data, or cancel. I've reviewed several of the other questions asked on this forum, but none seem to have the answer. The modal loads, but there is no data there to edit. The correct data is being returned via php (I can see this in Firefox' console), but nothing is displayed).

Here is my table:

<div >
        <div >
        
            <div >
                <div >
            
                <table  
                    id="scandata"
                    sortName="deviceId"
                    sortOrder="desc"
                    data-toggle="table"
                    data-detail-view="true"
                    data-detail-formatter="detailFormatter"
                    data-filter-control="true"
                    data-pagination="true">
                    <thead >
                    <tr>
                        <th data-name="deviceId" data-field="deviceId" data-visible="false">ID</th>
                        <th data-name="hostname" data-field="hostname_id" data-sortable="true" data-filter-control="input" data-align="center">Hostname</th>
                        <th data-name="ipAddr" data-field="ip_id" data-sortable="true" data-filter-control="input" data-align="center">IP</th>
                        <th data-name="macAddr_id" data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-align="center">Mac Address</th>               
                        <th data-name="openPorts" data-field="openPorts" data-sortable="true" data-filter-control="input" data-align="center">Open Ports</th>               
                        <th data-name="network" data-field="network" data-sortable="true" data-filter-control="input" data-align="center">Network</th>               
                        <th data-name="status" data-field="status" data-sortable="true" data-filter-control="input" data-align="center">Status</th>               
                        <th data-name="functionData" data-field="functionData" data-sortable="true" data-filter-control="input" data-align="center">Function</th> 
              
                    </tr>
                    </thead>
                    <tbody>
                <?php
                    while($row = $result->fetch_assoc()) {  ?>
                            
                        <tr>

                        <td><?php echo $row["deviceId"]; ?></a></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["hostname"]; ?></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo long2ip($row["ip"]); ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["macAddr"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["openPorts"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["network"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["status"]; ?></td>
                        <!-- <td><a href="" data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["functionData"]; ?></a></td> -->
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["functionData"]; ?></td>
                    
                        </tr>

                <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>

And my modal:

<div  id="myModal" role="dialog" aria-hidden="true">
    <div >
        <div >
            <div >
                <h2>Function</h2>
                <button type="button"  data-dismiss="modal">&times;</button> 
                <!-- <h4 >Notification</h4>                                                              -->
            </div> 
            <div >
                <form action="update.php" id="save-form">
                    <div >
                        <div >
                            <label for="functionData"></label>
                            <input  type="text" name="functionData" id="functionData">
                            <!-- <input  type="text" name="deviceId" id="deviceId" > -->
                        </div>
                    </div>  
                </div> 
                <div >
                    <!-- <button type="button"  data-dismiss="modal" aria-hidden="true">Cancel</button>    -->
                    <button type="button" id="save-btn" >Save Changes</button>                               
                                
                </div>
            </form>
        </div>                                                                       
    </div>  
</div> 

This is my jquery to load the modal, which is does. The problem is it does not load the cell data.

$('#scandata').on('click-cell.bs.table', function (field, value, row, $el) {
  if ( value == "functionData") {
 
    // alert($el.deviceId "-" $el.functionData);
    let deviceId = $el.deviceId;
    let functionData = $el.functionData;
    $.ajax({
      url: 'getFunctionData.php',
      type: 'post',
      data: {deviceId: deviceId, functionData:functionData},
      success: function(response){ 
        // Add response in modal body
        $('.functionData').val(response.functionData);
        $('#myModal').modal('show'); 
      }
    });
  }
});

And my getFunctionData.php:

if ( $stmt = $connection->prepare($functionQuery)) {
    $stmt->bind_param("i", $deviceId);
    $stmt->execute();
    $stmt->bind_result($functionData);
}

echo json_encode($functionData);

CodePudding user response：

your input field has the id="functionData", but you try to address the input field with a non existent class. change $('.functionData') to $('#functionData').

$('.functionData').val(...) is for classes <input ...

$('#functionData').val(...) is for id's <input id="functionData" ...