我怎样才能将变量传递给我的模态?

时间:2017-08-29 14:52:11

标签: php

我很难将变量传递给我的模态。

我无法简单地将informant id传递给我的模态,我真的希望将它用作我的查询作为我的基础来搜索或比较它。

我不知道如何传递它,就像使用GET函数传递变量的URL一样,我对此非常陌生,只是想尝试模态而不是创建一个新页面摘要。

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=deviceADMIN | Missing Person Tracking System-width, initial-scale=1.0" />
    <title>ADMIN | Missing Person Tracking System </title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
     <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
        <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
     <!-- Google Fonts-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php"><i class="fa fa-shield"></i> <strong>POLICE ADMIN </strong></a>
            </div>

           <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 min</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">

                        <li><a href="../login.php"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
        <div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a href="index.php"><i class="fa fa-dashboard"></i> Dashboard</a>
                    </li>
                    <li>
                        <a href="mp.php"><i class="fa fa-user"></i> Missing Person Management</a>
                    </li>
                    <li>
                        <a  href="ca.php"><i class="fa fa-plus"></i> Create Account</a></span>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap"></i> Manage Services <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="news.php?page=1"> News</a>
                            </li>
                            <li>
                                <a href="contacts.php"> Contacts</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="active-menu" href="#"><i class="fa fa-sitemap"></i> Transactions <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                             <li>
                                <<a class="active-menu"  href="transac_pending.php"> Pending</a>
                            </li>
                            <li>
                                <a href="transac_verified.php"> Verified</a>
                            </li>
                            <li>
                                <a href="transac_reject.php"> Rejected</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="report.php"><i class="fa fa-file"></i> Reports </a>
                    </li>

                    <li>
                        <a href="logs.php"><i class="fa fa-history"></i> Audit Trail</a>
                    </li>
                </ul>
            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
            <div id="page-inner">
             <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            Transaction Requests
                        </h1>
                    </div>
                </div> 
                 <!-- /. ROW  -->

                <div class="row"> 

                <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ol class="breadcrumb">

                            <li class="active">
                                <i class="fa fa-user"></i> List of Transaction Requests
                            </li>
                        </ol>
                </div>        

                            <div class="panel-body"> 
                                <div class="column" >
                                <tr>    
                                    <td>
                                        <table class="table table-hover" border="2">
                                        <col width="5%"></col>
                                        <col width="15%"></col>
                                        <col width="10%"></col>
                                        <col width="10%"></col>
                                        <col width="10%"></col>
                                        <col width="15%"></col>
                                        <col width="15%"></col>
                                        <col width="10%"></col>
                                    <thead>
                                        <tr>
                                        <center>
                                            <th><center>Informant Name</th>
                                            <th><center>Informant Address</th>
                                            <th><center>Informant Contact</th>
                                            <th><center>Informant Email</th>
                                            <th><center>Sighted Person</th>
                                            <th><center>Action</th>

                                        </center>

                                        </tr>
                                    </thead>

                                     <?php 

                include('mysql_connect.php');
                    $query="SELECT * from tbl_informant,tbl_missing_person where informant_status='Pending' and reported_id=mp_id";
                    $result=mysql_query($query);

                while($row=mysql_fetch_array($result)){
            ?>
                <tr>    
                    <td><center><?php echo $row['informant_fname'].' '.$row['informant_lname'];?></center></td>
                    <td><center>
                    <?php echo $row['informant_address'];?></center></td>
                    <td><?php echo $row['informant_contact']?></td>
                    <td><?php echo $row['informant_email']?></td>
                    <td>
                        <img src="<?php echo $row['mp_image_location'].$row['mp_image']?>" height=100 width=100><br>
                        <?php echo $row['mp_fname'].' '.$row['mp_lname']?>
                    </td>
                    <td>
                        <?php 

                        $id=$row['informant_id'];
                        $_SESSION['id']=$id;

                        echo "<center>
                                <button type='button'class='btn btn-primary btn-sm?id=".$id."' data-toggle='modal' title='Confirm'data-target='#ModalConfirm'>
                                Confirm</button>         


                                <button type='button'class='btn btn-danger btn-sm?id=".$id."' data-toggle='modal' title='Confirm'data-target='#ModalReject'>
                                Reject</button>

                            </center>"
                        ?>
                    </td>

                </tr>
            <?php
                }
            ?>
    <!-- Modal for REJECT-->
    <div class="modal fade" id="ModalReject" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><b>Rejecting Request:</h4></b>
        </div>
        <div class="modal-body">
          <p>Reason/s: </p>
          <textarea cols="75" rows="5" placeholder="Enter reason here.." name="transac_reason"></textarea>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
        </div>
      </div>

    </div>
  </div>

    <!-- Modal for CONFIRM-->
   <div class="modal fade" id="ModalConfirm" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
          <p>Are you sure you want to confirm request? </p>
          <?php
            $modalquery="select * from tbl_informant,tbl_missing_person,tbl_contact_person
                         where concat(reported_id=mp_id && mp_id=cp_id)";
          ?>



        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" >Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
      </div>

    </div>
  </div>

            </div>

                                </div>

                            </div>
        </div>
        </div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
     <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
      <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
     <!-- Morris Chart Js -->
     <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>
      <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

您无法像这样执行实时mysql查询来修改表格。

最好的方法是使用ajax,如果在表上,你可以捕获id并使用ajax来执行mysql查询。

我建议你将信息中的i​​d放在表格中按钮的值中,并带有一个类:

<button class="id" data-target="modal" value="<?= $row['informant_id'] ?>"/>

您可以使用以下命令获取带有jquery事件的按钮的值:

$(document).on("click", "id", function(){

var id = $(this).val();

console.log(id);

// and handle the value

});

这是传递变量的众多方法之一,如果您只想在模态上打印它,请创建一个带有ID的标记&#34;示例&#34;模态内的<h1 id="example"></h1>并执行:

$(document).on("click", "id", function(){

    var id = $(this).val();

    console.log(id);

    // and handle the value

    $(".modal #example").text(id);

    });

问候。