时间戳

首页 > 解决方案 > 如果代码中有超过 1 个模态，则模态 (BS4) 内容重新加载问题

php - 如果代码中有超过 1 个模态，则模态 (BS4) 内容重新加载问题

问题描述

您好 Bootsrap 4 我有 2 个模式代码（一个用于编辑数据，另一个用于添加数据）这是对 php/mysql 数据库的基本操作。我在这里阅读了很棒的主题：Reload content in modal (twitter bootstrap)但它没有帮助，所以这里是代码：

对于信息，ed.php 只是一个基本的 php 文件，它在获取 ID 参数后打印 ID 和名称，这里是它的代码：

    <?php
     if(!empty($_GET['id'])){$dbHost='localhost';$dbUsername='xxxx';$dbPassword='xxxx';$dbName='crud';
      $db=new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
      if($db->connect_error){die("Unable to connect database: ".$db->connect_error);}
      $query=$db->query("SELECT*FROM tasks WHERE id={$_GET['id']}");
      if($query->num_rows>0){
        $cmsData=$query->fetch_assoc();echo'<h4>'.$cmsData['name'].'</h4>';echo'<p>'.$cmsData['id'].'</p>';
      }else{echo 'Content not found....';}
    }else{echo 'Content not found2....';}
    ?>
    <!doctype html>
    <html lang="en">
    <?php include 'db.php';$sql="SELECT*FROM tasks";$rows=$db->query($sql);?>
    <head>
      <title>Crud</title>
    </head>
    <body>
      <div class="container">
        <div class="row" style="margin-top:70px;">
          <center><H1>todo list</H1></center>
        </div>
        <table class="table">
          <button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success gogo">Add task</button>
          <button type="button" class="btn btn-default float-right">Print</button>
          <hr>
          <br>
          <div class="modal fade" id="myModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Add task</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                  <form method = "post" action = "add.php">
                    <div class="form-group">
                      <label>Task name</label>
                      <input type="text" required name="task" class="form-control">
                    </div>
                    <input type="submit" name="send" value="send" class="btn btn-success">
                  </form>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal fade" id="edited" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Edit task</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                  <form method="post" action="add.php">
                    <div class="form-group">
                      <label>Task name</label>
                      <input type="text" value="ff" required name="task" class="form-control">
                    </div>
                    <input type="submit" name="send" value="send" class="btn btn-success">
                  </form>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <thead>
            <tr><th scope="col">#Number</th><th scope="col">Task</th></tr>
          </thead>
          <tbody>
            <tr>
            <?php while($row=$rows->fetch_assoc()):?>
              <th><?php echo $row['id']?></th>
              <td class="col-md-10"><?php echo $row['name']?></td>
              <td><a href="#edited?id=<?php echo $row['id'];?>" class="btn btn-success" data-target="#edited" data-toggle="modal">Edit</a><button type="button" class="btn btn-success openBtn" id="<?php echo $row['id'];?>">EDIT</button>
                <button type="button" class="btn btn-success push" return="false" data-target="#edited" id="<?php echo $row['id'];?>">Open Modal</button>
              </td>
              <td><a href ="delete.php?id=<?php echo $row['id'];?>"class="btn btn-danger">Delete</a></td>
            </tr>
            <?php endwhile;?>
          </tbody>
        </table>
      </div>
      <script type="text/javascript">
      $('.openBtn').on('click',function(){
        $('.modal-body').load("ed.php?id=2",function(){
          $('#edited').modal({show:true});
        });
      });
      </script>
      <script type="text/javascript">
      $(function(){
        $('.push').on('click',function(){
          var id=$(this).attr('id');
          $.ajax({
            type:'get',url:'ed.php',data:'id='+id,success:function(r){
              $('#edited').modal({show:true});
              $('.modal-body').show().html(r);
            }
          });
        });
      });
      </script>
      <script type="text/javascript">
      $('#modal').on('hidden.bs.modal',function(){
        $(this).removeData('bs.modal');
      });
      </script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    </html>

标签： phpjquerybootstrap-4modal-dialogreload

解决方案

推荐阅读