【问题标题】:php bootstrap error with modal带有模态的php引导错误
【发布时间】:2016-01-08 06:42:00
【问题描述】:

我运行了以下脚本,但是一旦我为模式添加了远程文件链接,它就不会更新。

  1. 我想从模式编辑
  2. 在该模式窗口中,确认数据已成功提交
  3. 关闭时,刷新crud。

我们将不胜感激。

我正在修改 class.crud.php 文件以包含这一行

删除

<a href="edit-data.php?edit_id=<?php print($row['id']); ?>"><i class="glyphicon glyphicon-edit"></i></a>

替换为

<a data-toggle="modal" class="btn btn-info" href="edit-data.php?edit_id=<?php print($row['id']); ?>" data-target="#myModal"><i class="glyphicon glyphicon-edit"></i></a>

索引.PHP

<?php include_once 'dbconfig.php'; ?>
<?php include_once 'header.php'; ?>

<div class="clearfix"></div>

<div class="container">
     <table class='table table-bordered table-responsive'>
     <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>E - mail ID</th>
     <th>Contact No</th>
     <th colspan="2" align="center">Actions</th>
     </tr>
     <?php
  $query = "SELECT * FROM tblUsers";       
  $records_per_page=10;
  $newquery = $crud->paging($query,$records_per_page);
  $crud->dataview($newquery);
  ?>
    <tr>
        <td colspan="7" align="center">
    <div class="pagination-wrap">
            <?php $crud->paginglink($query,$records_per_page); ?>
         </div>
        </td>
    </tr>

</table>


</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

<?php include_once 'footer.php'; ?>

CLASS.CRUD.PHP

    public function update($id,$fname,$lname,$email,$level_id)
 {
  try
  {
   $stmt=$this->db->prepare("UPDATE tblUsers SET firstname=:fname, 
                                                 lastname=:lname, 
                email=:email, 
                level_id=:contact
             WHERE id=:id ");
   $stmt->bindparam(":fname",$fname);
   $stmt->bindparam(":lname",$lname);
   $stmt->bindparam(":email",$email);
   $stmt->bindparam(":contact",$level_id);
   $stmt->bindparam(":id",$id);
   $stmt->execute();

   return true; 
  }
  catch(PDOException $e)
  {
   echo $e->getMessage(); 
   return false;
  }
 }

 public function delete($id)
 {
  $stmt = $this->db->prepare("DELETE FROM tblUsers WHERE id=:id");
  $stmt->bindparam(":id",$id);
  $stmt->execute();
  return true;
 }

 /* paging */

 public function dataview($query)
 {
  $stmt = $this->db->prepare($query);
  $stmt->execute();

  if($stmt->rowCount()>0)
  {
   while($row=$stmt->fetch(PDO::FETCH_ASSOC))
   {
    ?>
                <tr>
                <td><?php print($row['id']); ?></td>
                <td><?php print($row['firstname']); ?></td>
                <td><?php print($row['lastname']); ?></td>
                <td><?php print($row['email']); ?></td>
                <td><?php print($row['level_id']); ?></td>
                <td align="center">
                <a href="edit-data.php?edit_id=<?php print($row['id']); ?>"><i class="glyphicon glyphicon-edit"></i></a>
                </td>
                <td align="center">
                <a href="delete.php?delete_id=<?php print($row['id']); ?>"><i class="glyphicon glyphicon-remove-circle"></i></a>
                </td>
                </tr>
                <?php
   }
  }
  else
  {
   ?>
            <tr>
            <td>Nothing here...</td>
            </tr>
            <?php
  }

 }

EDIT-DATA.PHP

<?php
   include_once 'dbconfig.php';
   if(isset($_POST['btn-update']))
   {
    $id = $_GET['edit_id'];
    $fname = $_POST['firstname'];
    $lname = $_POST['lastname'];
    $email = $_POST['email'];
    $level_id = $_POST['level_id'];

    if($crud->update($id,$fname,$lname,$email,$level_id))
    {
     $msg = "<div class='alert alert-info'>
       <strong>WOW!</strong> Record was updated successfully <a href='index.php'>HOME</a>!
       </div>";
    }
    else
    {
     $msg = "<div class='alert alert-warning'>
       <strong>SORRY!</strong> ERROR while updating record !
       </div>";
    }
   }

   if(isset($_GET['edit_id']))
   {
    $id = $_GET['edit_id'];
    extract($crud->getID($id)); 
   }

   ?>
   <?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
   <?php
      if(isset($msg))
      {
       echo $msg;
      }
      ?>
</div>
<div class="clearfix"></div>
<br />
<div class="modal-header" id="myModal">
   <form method='post'>
      <div class="form-group">
         <label for="email">First Name:</label>
         <input type='text' name='firstname' class='form-control' value="<?php echo $firstname; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Last Name:</label>
         <input type='text' name='lastname' class='form-control' value="<?php echo $lastname; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Email:</label>
         <input type='text' name='email' class='form-control' value="<?php echo $email; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Level ID:</label>
         <input type='text' name='level_id' class='form-control' value="<?php echo $level_id; ?>" required>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
      </div>
   </form>
</div>

【问题讨论】:

  • 使用 Ajax 在 bootstrap modal 中加载edit-data.php?edit_id=&lt;?php print($row['id']); ?&gt;
  • 我不确定你的意思,你能详细说明一下吗?

标签: javascript php jquery twitter-bootstrap


【解决方案1】:

试试这个方法。 通过 ajax 加载引导模式

将您的a 标签包裹在div 中,以便于查看。

   <div id="edit_btn">
     <a data-toggle="modal" id="modal-<?php print($row['id']);?> " class="btn btn-info" href="#"><i class="glyphicon glyphicon-edit"></i></a>
      </div>

index.php

    <?php include_once 'dbconfig.php'; ?>
<?php include_once 'header.php'; ?>

<div class="clearfix"></div>

<div class="container">
     <table class='table table-bordered table-responsive'>
     <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>E - mail ID</th>
     <th>Contact No</th>
     <th colspan="2" align="center">Actions</th>
     </tr>
     <?php
  $query = "SELECT * FROM tblUsers";
  $records_per_page=10;
  $newquery = $crud->paging($query,$records_per_page);
  $crud->dataview($newquery);
  ?>
    <tr>
        <td colspan="7" align="center">
    <div class="pagination-wrap">
            <?php $crud->paginglink($query,$records_per_page); ?>
         </div>
        </td>
    </tr>

</table>

</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#edit_btn a").click(function() {
    var Id = jQuery(this).attr("id");
    $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
        url : "edit-data.php?edit_id=<?php print($row['id']); ?>",
        success: function(response) {
            if(response) {
                $('body').append(response);
                $('#modal_'+Id).modal('show');
                $(document).on('hidden.bs.modal', modal_id, function (event) {
                    $(this).remove();
                });
            } else {
                alert('Error');
            }
        }
    });
});
});
</script>

切换模态并将其插入EDIT-DATA.PHP

    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
<?php
   include_once 'dbconfig.php';
   if(isset($_POST['btn-update']))
   {
    $id = $_GET['edit_id'];
    $fname = $_POST['firstname'];
    $lname = $_POST['lastname'];
    $email = $_POST['email'];
    $level_id = $_POST['level_id'];

    if($crud->update($id,$fname,$lname,$email,$level_id))
    {
     $msg = "<div class='alert alert-info'>
       <strong>WOW!</strong> Record was updated successfully <a href='index.php'>HOME</a>!
       </div>";
    }
    else
    {
     $msg = "<div class='alert alert-warning'>
       <strong>SORRY!</strong> ERROR while updating record !
       </div>";
    }
   }

   if(isset($_GET['edit_id']))
   {
    $id = $_GET['edit_id'];
    extract($crud->getID($id));
   }

   ?>
   <?php include_once 'header.php'; ?>
<div class="clearfix"></div>
<div class="container">
   <?php
      if(isset($msg))
      {
       echo $msg;
      }
      ?>
</div>
<div class="clearfix"></div>
<br />
<div class="modal-header" id="myModal">
   <form method='post'>
      <div class="form-group">
         <label for="email">First Name:</label>
         <input type='text' name='firstname' class='form-control' value="<?php echo $firstname; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Last Name:</label>
         <input type='text' name='lastname' class='form-control' value="<?php echo $lastname; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Email:</label>
         <input type='text' name='email' class='form-control' value="<?php echo $email; ?>" required>
      </div>
      <div class="form-group">
         <label for="email">Level ID:</label>
         <input type='text' name='level_id' class='form-control' value="<?php echo $level_id; ?>" required>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
      </div>
   </form>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

【讨论】:

  • 非常感谢 nulldev,不幸的是它单独在 edit-data.php 中打开,还有什么我可以提供的吗?我发布了 index 和 edit-data 的 html
  • 老实说,我并没有很清楚你想表达什么。
  • 我无法测试您提供的这个示例,因为我没有您使用的额外文件。但是如果你有足够的耐心,我可以根据我的观点为你写一个清晰的例子,你可以参考它来解决你的问题。
  • 感谢您的帮助 - 缺少的 css 文件是
  • 然后包含它,&lt;link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
【解决方案2】:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Bootstrap</title>
      <link href="bootstrap.min.css" rel="stylesheet" media="screen">
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="navbar navbar-default navbar-static-top" role="navigation">
         <div class="container">
            <div class="navbar-header">
               <h1>nav bar</h1>
            </div>
         </div>
      </div>
      <div class="clearfix"></div>
      <div class="container">
      <table class='table table-bordered table-responsive'>
         <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>E - mail ID</th>
            <th>Contact No</th>
            <th colspan="2" align="center">Actions</th>
         </tr>
         <tr>
            <td>1</td>
            <td>James</td>
            <td>Smith</td>
            <td>james@gmail.com</td>
            <td>1</td>
            <td align="center">
               <div id="edit_btn">
                  <a data-toggle="modal" id="modal-1 " class="btn btn-info" href="edit-data.php?edit_id=1">test</i></a>
               </div>
            </td>
            <td align="center">
               <a href="delete.php?delete_id=1"><i class="glyphicon glyphicon-remove-circle"></i></a>
            </td>
         </tr>
         <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td>admin@gmail.com</td>
            <td>2</td>
            <td align="center">
               <div id="edit_btn">
                  <a data-toggle="modal" id="modal-2 " class="btn btn-info" href="edit-data.php?edit_id=2">test</i></a>
               </div>
            </td>
            <td align="center">
               <a href="delete.php?delete_id=2"><i class="glyphicon glyphicon-remove-circle"></i></a>
            </td>
         </tr>
         <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td>james.Smith@gmail.com</td>
            <td>3</td>
            <td align="center">
               <div id="edit_btn">
                  <a data-toggle="modal" id="modal-3 " class="btn btn-info" href="edit-data.php?edit_id=3">test</i></a>
               </div>
            </td>
            <td align="center">
               <a href="delete.php?delete_id=3"><i class="glyphicon glyphicon-remove-circle"></i></a>
            </td>
         </tr>
         <tr>
            <td colspan="7" align="center">
               <div class="pagination-wrap">
                  <ul class="pagination">
                     <li><a href='/test/index.php?page_no=1' style='color:red;'>1</a></li>
                  </ul>
               </div>
            </td>
         </tr>
      </table>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
            </div>
            <!-- /.modal-content -->
         </div>
         <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
      <script type='text/javascript'>
         $(document).ready(function() {
         $("#edit_btn a").on('click',function() {
             var Id = jQuery(this).attr("id");
             $.ajax({
                 type: 'POST',
                 data: {
                     'modal_id' : Id,
                 },
                 url : "edit-data.php?edit_id=",
                 success: function(response) {
                     if(response) {
                         $('body').append(response);
                         $('#modal_'+Id).modal('show');
                         $(document).on('hidden.bs.modal', modal_id, function (event) {
                             $(this).remove();
                         });
                     } else {
                         alert('Error');
                     }
                 }
             });
         });
         });
      </script>
      <div class="container">
         <div class="alert alert-info">

         </div>
      </div>
      <script src="bootstrap/js/bootstrap.min.js"></script>
   </body>
</html>

编辑日期.php

<!-- Modal -->
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PDO OOP CRUD using Bootstrap</title>
<link href="bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
<h1>nav bar</h1>
        </div>
         </div>

</div>




<div class="modal-header" id="myModal">
<div class="modal-body">
   <form method='post'>
      <div class="form-group">
         <label for="email">First Name:</label>
         <input type='text' name='firstname' class='form-control' value="Phil" required>
      </div>
      <div class="form-group">
         <label for="email">Last Name:</label>
         <input type='text' name='lastname' class='form-control' value="Smith" required>
      </div>
      <div class="form-group">
         <label for="email">Email:</label>
         <input type='text' name='email' class='form-control' value="phil@gmail.com" required>
      </div>
      <div class="form-group">
         <label for="email">Level ID:</label>
         <input type='text' name='level_id' class='form-control' value="6" required>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary" name="btn-update">Save changes</button>
      </div>
   </form>
   </div>
</div>

【讨论】:

    猜你喜欢
    • 2022-07-21
    • 1970-01-01
    • 2013-08-25
    • 2016-04-18
    • 2017-02-11
    • 2011-10-11
    • 2017-10-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多