根据模态点击显示数据答案

【问题标题】：Show data based on modal click根据模态点击显示数据
【发布时间】：2021-12-30 18:06:09
【问题描述】：

我制作了一个while循环以将数据显示为表格格式，我准备了<a>，点击它会打开一个模式。我希望每个模态在单击时都有关于该特定数据的更多信息。

我是这样准备的：

  <?php

    $mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
    or die('Dramatic Error: ' . mysqli_error($mysqli));

    $selectquery = "SELECT * FROM cases_reports";
    $query = mysqli_query($mysqli, $selectquery);
    $nums = mysqli_num_rows($query);

    while($res = mysqli_fetch_array($query)) {
  ?>
  <tr>
    <td class="name mb-0 text-sm"> <?php echo $res['cccEmployee']?> </td>
    <td> <?php echo $res['irNumber']?> </td>
    <td> <a href="#" data-toggle="modal" data-target="#modal-default"><?php echo $res['caseType']?></a> </td>
    <td> <?php echo $res['startDateTime']?> </td>
    <td> <?php echo $res['endDateTime']?> </td>
    <td>
      <div class="dropdown">
        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-ellipsis-v"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
          <a class="dropdown-item" href="#">Print PDF</a>
          <a class="dropdown-item" href="#">Export Excel</a>
          <a class="dropdown-item" href="#">Export Access</a>
        </div>
      </div>
    </td>
  </tr>

  <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
        <div class="modal-content">
          
            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-default"> <?php echo $res['caseType']?> </h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>   
        <div class="modal-body">
          <?php 
            echo $res['caseType'];
          ?>
      </div>      
  </div>
  <?php }?> <!-- End php While -->

当然，模态显示第一个可用数据，在这种情况下是“意外”。单击模态URL时如何显示每个数据的信息？

【问题讨论】：

标签： php bootstrap-4

【解决方案1】：

只需从 js 以编程方式调用您的模态，并在显示模态之前加载/替换其相应数据。

<a href="#" id="modalLuncher"><?php echo $res['caseType']?></a>

在你的 js 文件中：

$(document).ready(function(){
   $("#modalLuncher").click(function(){
   
   $("#modal-title-default").html('read from #modalLuncher data-* tag');
   //  $("#other-replacements") ;

   $("#modal-default").modal();
   });
});

【讨论】：

谢谢！它正在显示数据，但只有表格的第一个链接打开了一个模式，其余的不会
因此将 .modalLuncher 类赋予您想要打开 modal 的任何链接，将 $("#modalLuncher").click( ... ) 更改为 $(".modalLuncher").click( .. .) 并从一个特定标签读取/加载/替换模态数据。
好的，模态显示在所有标签中，但是....模态显示第一个数据的信息
在打开模态之前替换模态数据。我在给你的答案中举了一个例子。在该示例中，您将根据单击的行更改模态标题。
对不起...我尝试了不同的方法但无法弄清楚:(

【解决方案2】：

我想显示模态，以便我可以通过 Ajax 编辑表格。

我做了什么：

脚本：

$(document).ready(function() {
      // Append values in input fields
      $(document).on('click', 'a[data-role=update]', function(){
         var id =             $(this).data('id');
         var cccEmployee =    $("#"+id).children('td[data-target=cccEmployee]').text();
         var irNumber =       $("#"+id).children('td[data-target=irNumber]').text();
         var caseType =       $("#"+id).children('td[data-target=caseType]').text();
         var startDateTime =  $("#"+id).children('td[data-target=startDateTime]').text();
         var endDateTime =    $("#"+id).children('td[data-target=endDateTime]').text();

         //Append the variables
         $('#cccEmployee').val(cccEmployee);
         $('#IR_number').val(irNumber);
         $('#case_type').val(caseType);
         $('#startDate').val(startDateTime);
         $('#endDate').val(endDateTime);
         $('#caseId').val(id);

         $('#reportsModal').modal('toggle');
      });

      //Create event to get data from fields and update.
      $('#save_report_changes').click(function() {
         var id = $('#caseId').val();
         var cccEmployee = $('#cccEmployee').val();
         var irNumber=  $('#IR_number').val();
         var caseType = $('#case_type').val();
         var startDateTime = $('#startDate').val();
         var endDateTime = $('#endDate').val();

         $.ajax({
            url: '/edit-report',
            method: 'post',
            data: {
               id: id,
               cccEmployee: cccEmployee,
               irNumber: irNumber,
               caseType: caseType,
               startDateTime: startDateTime,
               endDateTime: endDateTime
            },
            success: function(response) {
               
               $("#"+id).children('td[data-target=cccEmployee]').text(cccEmployee);
               $("#"+id).children('td[data-target=irNumber]').text(irNumber);
               $("#"+id).children('td[data-target=caseType]').text(caseType);
               $("#"+id).children('td[data-target=startDateTime]').text(startDateTime);
               $("#"+id).children('td[data-target=endDateTime]').text(endDateTime);
               
               $('#reportsModal').modal('toggle');
            },
         });
      });
   });

然后在php中创建了一个while循环来显示数据+将编辑按钮链接到ajax：

<!-- Start PHP While -->
<?php

$mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
or die('Dramatic Error: ' . mysqli_error($mysqli));

if( isset($_POST['id']) ) {
    $id = $_POST['id'];
    $ccc_employee = $_POST['cccEmployee'];
    $IR_number = $_POST['irNumber'];
    $case_type = $_POST['caseType'];
    $caseLocation = $_POST['caseLocation'];
    $startDate = $_POST['startDateTime'];
    $endDate = $_POST['endDateTime'];
    $case_description = $_POST['caseDesc'];
    $action_taken = $_POST['actionsTaken'];
    $details = $_POST['caseDetails'];
    $notes = $_POST['caseNotes'];
    $recommendation = $_POST['caseRecommendation'];

    // Query to update data
    $result = mysqli_query($mysqli, "UPDATE cases_reports SET
    cccEmployee='$ccc_employee',
    irNumber='$IR_number',
    caseType='$case_type',
    caseLocation='$caseLocation',
    startDateTime='$startDate',
    endDateTime='$endDate',
    caseDesc='$case_description',
    actionsTaken='$action_taken',
    caseDetails='$details',
    caseNotes='$notes',
    caseRecommendation='$recommendation'
    WHERE id='$id'");

    if( $result ) {
        return "Data updated successfully";
    }
}

$selectquery = "SELECT * FROM cases_reports";

$table = mysqli_query($mysqli, $selectquery);
$nums = mysqli_num_rows($table);

while($res = mysqli_fetch_array($table)) {
?>

<tr id="<?php echo $res['id']?>">
<td data-target="cccEmployee"> <?php echo $res['cccEmployee']?> </td>
<td data-target="irNumber"> <?php echo $res['irNumber']?> </td>
<td data-target="caseType"> <?php echo $res['caseType']?> </td>
<td data-target="startDateTime"> <?php echo $res['startDateTime']?> </td>
<td data-target="endtDateTime"> <?php echo $res['endDateTime']?> </td>
<td class="table-actions">
    <a href="#" data-role="update" data-id="<?php echo $res['id']; ?>">
        <i class="fas fa-edit"></i>
    </a>
    <!-- <a href="#!" class="table-action table-action-delete" data-toggle="tooltip" data-original-title="Delete product">
        <i class="fas fa-trash"></i>
    </a> -->
</td>
<td>
  <div class="dropdown">
    <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fas fa-ellipsis-v"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
      <a class="dropdown-item" href="#">Print PDF</a>
      <a class="dropdown-item" href="#">Export Excel</a>
      <a class="dropdown-item" href="#">Export Access</a>
    </div>
  </div>
</td>
</tr>

<div class="modal fade" id="reportsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="modal-title-default"> Case Details </h6>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>   
    <div class="modal-body" id="case-data">
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="cccEmployee">CCC Employee</label>
            <input type="text" class="form-control" id="cccEmployee" name="cccEmployee">
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="IR_number">IR Number</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="IR_number">IR#</span>
              </div>
              <input type="number" class="form-control" name="IR_number" id="IR_number">
            </div>
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="form-group">
          <label class="form-control-label" for="case_type">Case Type</label>
            <select class="form-control" name="case_type" id="case_type" data-toggle="select">
                <option value="" disabled selected>Select Case Type</option>
                <option value="Accident">Accident</option>
                <option value="Theft">Theft</option>
                <option value="Death">Death</option>
                <option value="Harrasment">Harrasment</option>
                <option value="badBehaviour">Bad Behaviour</option>
                <option value="Drugs">Drugs</option>
                <option value="Drunk">Drunk</option>
                <option value="Fight">Fight</option>
                <option value="Medical">Medical</option>
                <option value="illegalEntry">Illegal Entry</option>
                <option value="illegalWorker">Illegal Worker</option>
                <option value="Fire">Fire</option>
                <option value="Electric">Electric</option>
                <option value="illegalHunting">Illegal Hunting</option>
                <option value="oilLeak">Oil Leak</option>
                <option value="petrolLeak">Petrol Leak</option>
                <option value="Kidnapping">Kidnapping</option>
                <option value="Blackmail">Blackmail</option>
                <option value="Misunderstanding">Misunderstanding</option>
                <option value="propertyDamage">Property Damage</option>
                <option value="smoke_NoFire">Smoke, No Fire</option>
                <option value="stuck_InElevator">Stuck in Elevator</option>
                <option value="Scooter">Scooter</option>
                <option value="Drifting">Drifting</option>
                <option value="LostPerson">Lost Person</option>
                <option value="Fraud_Forgery">Fraud/Forgery</option>
                <option value="Other">Other</option>
            </select>
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="caseLocation">Location</label>
            <select class="form-control" name="caseLocation" id="caseLocation" data-toggle="select">
                <option value="" disabled selected>Select Location</option>
                <option value="Baylasun">Baylasun</option>
                <option value="Baylasun Hotel">Baylasun Hotel</option>
                <option value="AL-Waha">AL-Waha</option>
                <option value="Al-Morooj">Al-Morooj</option>
                <option value="Royal Green">Royal Green</option>
                <option value="Beach Towers">Beach Towers</option>
                <option value="Emmar Building">Emmar Building</option>
                <option value="Industrial Area (East)">Industrial Area (East)</option>
                <option value="Industrial Area (West)">Industrial Area (West)</option>
                <option value="Hejaz Gate">Hejaz Gate</option>
                <option value="Gate 3">Gate 3</option>
                <option value="Marina 1">Marina 1</option>
                <option value="Marina 2">Marina 2</option>
                <option value="Marina 3">Marina 3</option>
                <option value="Tala Garden">Tala Garden</option>
                <option value="AL-Shorooq">AL-Shorooq</option>
                <option value="Yam Beach">Yam Beach</option>
                <option value="Sales Center">Sales Center</option>
            </select>
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="startDate">Start Date & Time</label>
            <input class="form-control" type="datetime-local" name="startDate" id="startDate">
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="form-group">
          <label class="form-control-label" for="endDate">End Date & Time</label>
          <input class="form-control" type="datetime-local" name="endDate" id="endDate">
          </div>
        </div>
        <div class="col-md-12 mb-3">
          <div class="form-group">
          <label class="form-control-label" for="case_description">Case Description</label>
          <textarea class="form-control" name="case_description" id="case_description" rows="3"></textarea>
          </div>
        </div>
        <div class="col-md-12 mb-3">
          <div class="form-group">
          <label class="form-control-label" for="action_taken">Actions Taken</label>
          <textarea class="form-control" name="action_taken" id="action_taken"></textarea>
        </div>
        </div>
        <div class="col-md-12 mb-3">
          <div class="form-group">
          <label class="form-control-label" for="details">Details</label>
          <textarea class="form-control" name="details" id="details"></textarea>
          </div>
        </div>
        <div class="col-md-12 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="notes">Notes</label>
            <textarea name="notes" id="notes" class="form-control"></textarea>
          </div>
        </div>
        <div class="col-md-12 mb-3">
          <div class="form-group">
            <label class="form-control-label" for="recommendation">Recommendations</label>
            <textarea name="recommendation" id="recommendation" class="form-control"></textarea>
          </div>
        </div>
        <input type="hidden" id="caseId" class="form-control"/> 
      </div>
    </div>
<div class="modal-footer">
  <button type="button" id="save_report_changes" class="btn btn-primary">Save changes</button>    
</div>
<?php } //End php While

【讨论】：