PHP在<div>的一部分上创建Loading覆盖

问题描述

我是PHP的新手,所以请多多包涵。

我有一个PHP脚本,可以从mysql表中获取数据。我想在php完成抓取时创建一个“正在加载”的覆盖图(文本或img都可以)。

这是我的代码:

<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if (strlen($_SESSION['cmssid']==0)) {
  header('location:logout.php');
  } else{
    if(isset($_POST['submit']))
  {

$cmssid=$_SESSION['cmssid'];
 
date_default_timezone_set("Asia/Kolkata");
$date = date("Y-m-d h:i:sa");

$drivername=$_POST['drivername'];
$drivercontact=$_POST['drivercontact'];
$vehicletype=$_POST['vehicletype'];
$vehiclenumber=$_POST['vehiclenumber'];
$odo=$_POST['odo'];
$partloadid=$_POST['partloadid'];
$fullloadid=$_POST['fullloadid'];

$partload = 'partload';
$fullload = 'fullload';

$status = 'Started';

// $trackingnumber=mt_rand(100000000,999999999);
$query11 = "SELECT ID FROM tblchallan ORDER BY ID DESC LIMIT 1";
   $result11 = mysqli_query($con,$query11);


   if(mysqli_num_rows($result11) > 0)
   {
    while($row11 = mysqli_fetch_array($result11))
      {
        $trackingnumber = $row11['ID'];
       echo $trackingnumber += 1;
      }
    } else {
      $trackingnumber=1;
    }

 $query=mysqli_query($con,"INSERT INTO tblchallan(ChallanNo,LoginId,DriverName,DriverContact,VehicleType,VehicleNumber,Odo,Status,CreatedAt) value('$trackingnumber','$cmssid','$drivername','$drivercontact','$vehicletype','$vehiclenumber','$odo','$status','$date')");

    if ($query) {
                  $last_id = mysqli_insert_id($con);
               // for($count = 0; $count < count($partloadid); $count++)
               //  {
                    foreach ($partloadid as $value) {

                     $ret=mysqli_query($con,"SELECT * FROM tblpartloadbook WHERE ID = '$value';");


                    while ($row=mysqli_fetch_array($ret)) {
                        extract($row);
                    $sql1 = "INSERT INTO tblchallanselection(ChallanId,BookingLoad,BookingId,BookingTrackingNo,ConsignorName,ConsigneeName,ConsignorContact,ConsigneeContact,ParcelPosition,Amount)VALUES ('$last_id','$partload','$ID','$TrackingNo','$ConsignorName','$ConsigneeName','$ConsignorContact','$ConsigneeContact','$ParcelPosition','$ItemTotalAmount');";

                    $result1 = mysqli_query($con,$sql1);
                 }
                 }
                // }
                if ($result1) {
                  $msg="Challan has been added.";
                } else
                  {
                    $msg="Something went wrong. Please try again";
                  }
                  // for($count1 = 0; $count1 < count($fullloadid); $count1++)
                // {
                  foreach ($fullloadid as $value1) {

                     $ret1=mysqli_query($con,"SELECT * FROM tblfullloadbook WHERE ID = '$value1';");


                    while ($row1=mysqli_fetch_array($ret1)) {
                        extract($row1);
                    $sql2 = "INSERT INTO tblchallanselection(ChallanId,'$fullload',$sql2);
                 }
                 }
                // }
                $msg = ('<a href="challan-reciept.php?print_c='.$last_id.'" class="btn btn-primary" target="_blank">Print Challan</a>   <a href="challan-reciept-driver.php?print_c='.$last_id.'" class="btn btn-primary" target="_blank">Print Driver Challan</a>
                    ');
            } else{
                $msg="Something Went Wrong. Please try again";
            }


}

?>


<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM,CMS,etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Challan</title>

        <!-- Switchery css -->
        <link href="../plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

        <!-- Datepicker CSS -->
        <link href="../plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />

        <link href="assets/css/jquery-ui.css" rel="stylesheet" type="text/css" />



    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
           <?php include_once('includes/header.php');?>
           <?php include_once('includes/leftbar.php');?>
            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container-fluid">

                        <div class="row">
                            <div class="col-xl-12">
                                <div class="page-title-box">
                                    <h4 class="page-title float-left">Challan Detail</h4>



                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->


                        <!-- end row -->

                        <div class="row">

                            <div class="col-md-12">
                                <div class="card-box">
   <p style="font-size:16px; color:red" align="center"> <?php if($msg){
    echo $msg;
  }  ?> </p>

                                   <h4 class="header-title m-t-0 m-b-30">Challan Detail</h4>
<form name="addchallan" method="post" enctype="multipart/form-data">
                                    <div class="form-group row">
                                        <label for="example-search-input" class="col-2 col-form-label">Driver Name</label>
                                        <div class="col-10">
                                            <input class="form-control" type="text" value="" id="" name="drivername" required="true">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="example-search-input" class="col-2 col-form-label">Driver Contact</label>
                                        <div class="col-10">
                                            <input class="form-control" type="text" value="" id="" name="drivercontact" required="true">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="example-search-input" class="col-2 col-form-label">Vehicle Type</label>
                                        <div class="col-10">
                                            <input class="form-control" type="text" value="" id="" name="vehicletype"  required="true">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="example-search-input" class="col-2 col-form-label">Vehicle Number</label>
                                        <div class="col-10">
                                            <input class="form-control" type="text" value="" id="" name="vehiclenumber"  required="true">
                                        </div>
                                    </div>
                                    
                                        <div class="form-group row">
                                        <label for="example-search-input" class="col-2 col-form-label">Odometer Start Reading</label>
                                        <div class="col-10">
                                            <input class="form-control" type="text" value="" id="" name="odo"  required="true">
                                        </div>
                                    </div>

                                    <h4 class="header-title m-t-0 m-b-30" style="margin-top: 4%">Booking Detail</h4>
                                    <div class="col">

                                             <div class='col'>
                                      <div class="input-group">
                                        <label for="example-text-input">From</label>
                                        <div class="col-2">
                                           <input class="form-control datepicker" type="text" id="from" name="from" placeholder="From Date">
                                        </div>
                                         <label for="example-text-input">To</label>
                                         <div class="col-2">
                                           <input class="form-control datepicker" type="text" id="to" name="to" placeholder="To Date">
                                        </div>

                                      <input type="hidden" name="hidden_selection" id="hidden_selection" />
                                      <input type="hidden" name="hidden_selection2" id="hidden_selection2" />


                                      <!-- Day,Week,Month,year Wise -->
                                  <div class="col-2">
                                       <select name='dwm' id="dwm" class="form-control white_bg">
                                               <option value="">Select</option>
                                               <option value="day">Day</option>
                                               <option value="week">Week</option>
                                               <option value="month">Month</option>
                                      </select>
                                  </div>
                                       <input type="hidden" name="hidden_selection3" id="hidden_selection3" />


                                   </div>

                            </div>
                                    <div class="form-row after-add-more" style="padding-top: 30px">



                                <!-- <div class='form-row' style='margin-top:10px;'>



                            </div> -->
                            
                                <div class="col">
                                <input type="checkbox" class="form-control" onclick="toggle(this);" />
                                </div>
                                <div class="col">
                                  <label for="example-text-input">Load</label>
                                </div>
                                   <div class="col">
                                  <label for="example-text-input">Date</label>
                                </div>
                                    <div class="col">
                                      <label for="example-text-input">Tracking No</label>
                                </div>

                                <div class="col">
                                  <label for="example-text-input">Consignor name</label>
                                </div>

                                <div class="col">
                                      <label for="example-text-input">Consignee Name</label>
                                </div>

                                <div class="col">
                                      <label for="example-text-input">Consignor Contact</label>

                                </div>
                                
                                <div class="col">
                                      <label for="example-text-input">Consignee Contact</label>

                                </div>
                                <div class="col">
                                  <label for="example-text-input">Payment Mode</label>
                                </div>
                                
                                <div class="col">
                                  <label for="example-text-input">Parcel Position</label>
                                </div>

                                <div class="col">
                                      <label for="example-text-input">Amount</label>

                                </div>

                            </div>
                            


                            <?php //$ret=mysqli_query($con,"select * from tblpartloadbook");
                                //while ($row=mysqli_fetch_array($ret)) {
                                   // extract($row);
                                ?>
                                  <div class='form-row' id="output2" style='margin-top:10px;'>
                                  </div>
                            <div class='form-row' id="output" style='margin-top:10px;'>


                                   <!-- <div class='col'>
                                      <div class="input-group">
                                      <input type="checkbox" class="form-control" id="" name="partloadid[]" value="<?php //echo $row['ID']; ?>" placeholder="Item Desc">
                                      <input type="text" class="form-control" id="" name="partloadid[]" value="<?php //echo 'Part Load'; ?>" placeholder="Item Desc" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="trackingno[]" value="<?php //echo $row['TrackingNo']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="consignorname[]" value="<?php //echo $row['ConsignorName']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="consigneename[]" value="<?php //echo $row['ConsigneeName']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="contact[]" value="<?php //echo $row['ConsigneeContact']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="amount[]" value="<?php //echo $row['ItemTotalAmount']; ?>" disabled="">
                                       </div>
                                   </div> -->

                          </div>
                      <?php //} ?>

                       <?php //$ret1=mysqli_query($con,"select * from tblfullloadbook");

                                //while ($row1=mysqli_fetch_array($ret1)) {
                                  //  extract($row1);
                                ?>
                            <!-- <div class='form-row' style='margin-top:10px;'>


                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="checkbox" class="form-control" id="" name="fullloadid[]" value="<?php //echo $row1['ID']; ?>" placeholder="Item Desc">
                                      <input type="text" class="form-control" id="" name="partloadid[]" value="<?php //echo 'Full Load'; ?>" placeholder="Item Desc" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="trackingno[]" value="<?php //echo $row1['TrackingNo']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="consignorname[]" value="<?php //echo $row1['ConsignorName']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="consigneename[]" value="<?php //echo $row1['ConsigneeName']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="contact[]" value="<?php //echo $row1['ConsigneeContact']; ?>" disabled="">
                                       </div>
                                   </div>

                                   <div class='col'>
                                      <div class="input-group">
                                      <input type="text" class="form-control" id="" name="amount[]" value="<?php //echo $row1['ItemTotalAmount']; ?>" disabled="">
                                       </div>
                                   </div> -->

                          </div>
                      <?php //} ?>
                                    <!-- <div class="form-group row">
                                        <label for="example-email-input" class="col-2 col-form-label">Staff Email</label>
                                        <div class="col-10">
                     <input class="form-control" type="email" onblur="checkstaffemail(this.value)" id="emailid" name="email" required="true">
                            <span id="chkeml"></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="example-url-input" class="col-2 col-form-label">Staff Password</label>
                                        <div class="col-10">
                                            <input class="form-control" type="password" value="" name="password" required="true">
                                        </div>
                                    </div> -->





                                    <div class="form-group row" style="margin-top: 20px;">

                                        <div class="col-10">
                                          <p style="text-align: center;">
                    <button type="submit" name="submit" class="btn btn-primary" id="submit">Submit</button></p>

                                        </div>

                                    </div>
                                </form>
                                </div>

                            </div>
                        </div>



                        <!-- end row -->


                    <!-- container -->




            </div>
            <!-- End content-page -->


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->



            <?php include_once('includes/footer.php');?>


        </div>
    </div></div>
        <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="../plugins/switchery/switchery.min.js"></script>
        <script src="../plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <script src="assets/js/jquery-ui.js"></script>

        <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
  <!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
  <!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
  <!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->

<!-- START OF CHECK ALL  -->
    <script type="text/javascript">
        function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}
    </script>
<!-- END OF CHECK ALL  -->
        <script>
$(document).ready(function(){

 load_data();

 function load_data(from='',to='')
 {
  $.ajax({
   url:"challan-book-fetch.php",method:"POST",data:{from:from,to:to},success:function(data)
   {
    $('#output').html(data);
   }
  })
 }

 $('#from,#to').change(function(){
  $('#hidden_selection').val($('#from').val());
  $('#hidden_selection2').val($('#to').val());
  var from = $('#hidden_selection').val();
  var to = $('#hidden_selection2').val();
  load_data(from,to);

 });

});
</script>

<!-- Day,Month And Year -->
<script>
$(document).ready(function(){

// load_data2();

function load_data2(query='')
{
$.ajax({
url:"challan-book-fetch2.php",data:{query:query},success:function(data)
{
$('#output2').html(data);
}
})
}

$('#dwm').change(function(){
$('#hidden_selection3').val($('#dwm').val());
var query = $('#hidden_selection3').val();
load_data2(query);
});

});
</script>
<!-- <script>
  $( function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,changeYear: true,dateFormat: 'dd-mm-yy',showButtonPanel: true
    });
  } );
  </script> -->

  <script>
  $( function() {
      from = $( "#from" )
        .datepicker({
          changeMonth: true,showButtonPanel: true
        })

      to = $( "#to" ).datepicker({
          changeMonth: true,showButtonPanel: true
      })


    // function getDate( element ) {
    //   var date;
    //   try {
    //     date = $.datepicker.parseDate( dateFormat,element.value );
    //   } catch( error ) {
    //     date = null;
    //   }

    //   return date;
    // }
  } );
  </script>

    </body>
</html>
<?php }  ?>

我该如何在“载荷,跟踪号,发货人名称...”列下进行“装载”叠加。

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...