Question

我希望有人会帮助我。当我在我的crud表中单击编辑时，我遇到了无法显示模态的问题。这是我的表格代码，希望大家都能帮到我。先感谢您。：）

   <?php while ($row = mysqli_fetch_array($results)) { ?>
      <tr>
         <td><?php echo $row["brand_name"]; ?></td>
         <td><?php echo $row["brand_status"]; ?></td>
         <td>
             <a href="brand.php?edit=<?php echo $row["brand_id"]; ?>">
             <button type="button" data-toggle="modal" data-target="#modal-default" class="btn btn-success"><i class="fa fa-edit"></i> Edit</button>
             </a>
             <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
         </td>
     </tr>
   <?php } ?>

这也是我模态的代码。我认为这段代码没有错误。因为这里没有不必要的输出。我希望有人能真正帮助我。谢谢。

<div class="modal fade" id="modal-default">
 <div class="modal-dialog">
   <div class="modal-content">
     <form action="server.php" method="POST">
       <input type="hidden" name="brand_id" value="<?php echo $brand_id; ?>"/>
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title">Add a brand</h4>
       </div>
       <div class="modal-body">
         <div class="form-group">
          <label for="brand_name">Brand Name</label>
           <input type="text" class="form-control" name="brand_name" value="<?php echo $brand_name; ?>" placeholder="Brand Name"/>
         </div>
         <?php if ($edit_state == false): ?>
          <div class="form-group">
            <label for="brand_status">Status</label>
            <select class="form-control select2" style="width: 100%;" name="brand_status">
             <option>Available</option>
             <option>Not Available</option>
            </select>
          </div>
          <?php else: ?>
             <div class="form-group">
                <label for="brand_status">Status</label>
                <select class="form-control select2" style="width: 100%;" name="brand_status">
                 <option><?php echo $brand_status; ?></option>
                </select>
             </div>
           <?php endif ?>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <?php if ($edit_state == false): ?>
            <button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button>
          <?php else: ?>
           <button type="submit" class="btn btn-primary" name="btn_update">Update</button>
          <?php endif ?>
         </div>
        </form>
       </div>
     </div>
   </div>

Answer 1

首先你的html标记是错误的，你不能把按钮作为a元素的后代。

您需要有一个元素按钮或锚标记。

最好的方法是使用锚标记，然后在点击链接时使用jquery打开模态。

为按钮创建动态ID，然后使用jquery找出点击了哪个按钮。

这就是你如何做到这一点：

<?php while ($row = mysqli_fetch_array($results))
    $brand_status = $row['brand_status'];
    $brand_name = $row['brand_name'];
    $brand_id = $row['brand_id'];
 { ?>
      <tr>
         <td><?php echo $brand_name; ?></td>
         <td><?php echo $brand_status; ?></td>
         <td>
             <a href="#" data-brand="<?=$brand_name?>" data-status="<?=$brand_status?>" class="btn btn-success" id="brand_<?=$brand_id?>"><i class="fa fa-edit"></i> Edit </a>
             <button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
         </td>
     </tr>
   <?php } ?>

然后你的模态

div class="modal fade" id="modal-default">
 <div class="modal-dialog">
   <div class="modal-content">
     <form action="server.php" method="POST">
       <input type="hidden" name="brand_id">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title">Add a brand</h4>
       </div>
       <div class="modal-body">
         <div class="form-group">
          <label for="brand_name">Brand Name</label>
           <input type="text" class="form-control" name="brand_name" placeholder="Brand Name"/>
         </div>
         <?php if ($edit_state == false): ?>
          <div class="form-group">
            <label for="brand_status">Status</label>
            <select class="form-control select2" style="width: 100%;" name="brand_status">
             <option>Available</option>
             <option>Not Available</option>
            </select>
          </div>
          <?php else: ?>
             <div class="form-group">
                <label for="brand_status">Status</label>
                <select class="form-control select2" style="width: 100%;" name="brand_status">
                 <option><?php echo $brand_status; ?></option>
                </select>
             </div>
           <?php endif ?>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <?php if ($edit_state == false): ?>
            <button type="submit" class="btn btn-primary" name="btn_save">Save Changes</button>
          <?php else: ?>
           <button type="submit" class="btn btn-primary" name="btn_update">Update</button>
          <?php endif ?>
         </div>
        </form>
       </div>
     </div>
   </div>

我不太清楚$edit_state的作用是什么？另外，最好使用jquery来执行该控制语句。

然后你的jquery：

 <script type="text/javascript">
       $('document').ready(function(){
        $('[id^="brand_"]').on('click',function(){
        var index = $(this).attr('id').split("_")[1]; // brand ID
        var brandname = $(this).data('brand'); // get the click brandname
        var status = $(this).data('status'); // get the status of the clicked brand
        $('#modal-default').modal('toggle'); // open modal

        $('input[type="hidden"][name="brand_id"]').val(index); // assign the id to the input field
        $('input[type="text"][name="brand_name"]').val(brandname);


       });
    });
   </script>

这就是我能用你当前的信息走多远。

单击按钮后模态不显示

1 个答案: