在模态内将数据从主页传递到php查询

Pjustindaryll

我有一个dataTable,将其行传递给模式。是否可以使用相同的模式脚本将其直接传递到php页面?

这是我的main_page.php

<table id="example1" class="table table-bordered">
                <thead>
                  <th>Reference No</th>
                  <th>Finger Scan No</th>
                  <th>Date From</th>
                  <th>Date To </th>
                    <th>Tools </th>
                </thead>
                <tbody>
<?php
$user = $user['fingerscanno'];
$sql = "
SELECT 
payroll.payrollno AS payrollno,
payroll.referenceno AS referenceno,
payroll.fingerscanno AS fingerscanno,
payroll.datefrom AS datefrom,
payroll.dateto AS dateto,
USERINFO.USERID,
USERINFO.BADGENUMBER

FROM 

payroll,
USERINFO

WHERE
USERINFO.BADGENUMBER = payroll.fingerscanno AND
payroll.fingerscanno='$user'
";
                    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
                    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
                      echo "
                        <tr>
                        <td>".$row['referenceno']."</td>
                          <td>".$row['fingerscanno']."</td>
                          <td>".$row['datefrom']."</td>
                          <td>".$row['dateto']."</td>
                          <td>
                            <button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Proof of Attendance</button>
                            <button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Payslip Summary</button>
                          </td>

                        </tr>
                      ";
                    }
                  ?>
                </tbody>
              </table>

<?php include 'includes/mymodal.php'; ?>

这是模态函数

$(function(){
  $("body").on('click', '.edit', function (e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

这是模式页面

mymodal.php

<div class="modal fade" id="edit">
<input type="hidden" class="decid" id="id" name="id">
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
<?php 
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";

                    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
                    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){

 echo "
                        <tr>
                          <td>".$row['scheduledate']."</td>
                          <td>".$row['schedulename']."</td>
                          <td>".$row['recordin']."</td>
                          <td>".$row['recordout']."</td>
                          <td>".$row['noofdays']."</td>
                          <td>".$row['rate']."</td>
                          <td>".$row['nightdifferential']."</td>
                          <td>".$row['leaveday']."</td>
                          <td>".$row['regularholiday']."</td>
                          <td>".$row['specialholiday']."</td>
                        </tr>
                      ";
}

                  ?>
                  </tbody>
              </table>
</div>

我的问题是,如何将其传递到桌子上?这样该变量referenceno='$id'将从主页接收值。

茜草属

您需要使用AJAX。

Ajax是一种javascript方法,可让您与尝试进行后端PHP文件交换信息。

AJAX代码块将数据发送到mymodal.php文件,该mymodal.php文件将执行MySQL查找并创建HTML,然后将echo一个字符串变量(可以是json对象,也可以是您在while循环中构建的HTML)返回主页。AJAX代码块将接收.done()函数内部的PHP文件中回显的数据,并且在该函数中,您也可以修改DOM以注入新数据。对于用户来说,看起来就像他们单击具有class的元素,edit而数据只是出现在模态中一样。

请注意,您不在页面中includemymodal.php文件中main_file.php,因为AJAX代码块知道如何与该文件通信。

您需要将模式的HTML结构添加到主页底部(请注意,其最初设置为display:none):

<style>
    #lamodal{display:none;position:fixed;width:100vw;height:100vh;background:black;opacity:0.8;}
        #mdl_inner{width:60%;height:40%;}
    .myflex{display:flex;align-items:center;justify-content:center;}
</style>
<div id="lamodal" class="myflex">
    <div id="mdl_inner"></div>
</div><!-- #lamodal -->

您的JavaScript(AJAX)如下所示:

$(function(){
    $("body").on('click', '.edit', function (e){
        e.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            type: 'post',
             url: 'mymodal.php',
            data: 'userid=id'
        }).done(function(d){
            //console.log('d: '+d);
            $('#mdl_inner').html(d);
            $('#lamodal').show();
        });
    });
});

您的mymodal.php文件将更改为如下所示:

<?php 
    $sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
    FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));

    $out = '
        <table id="example2" class="table table-bordered">
            <thead>
                <th>Schedule Date</th>
                <th>Schedule Name</th>
                <th>Recorded In</th>
                <th>Recorded Out</th>
                <th>Day Count</th>
                <th>Day Value</th>
                <th>N.D. Value</th>
                <th>Leave Count</th>
                <th>R.H. Count</th>
                <th>R.H. Value</th>
            </thead>
            <tbody>
    ';

    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
        $out .= '
            <tr>
              <td>".$row['scheduledate']."</td>
              <td>".$row['schedulename']."</td>
              <td>".$row['recordin']."</td>
              <td>".$row['recordout']."</td>
              <td>".$row['noofdays']."</td>
              <td>".$row['rate']."</td>
              <td>".$row['nightdifferential']."</td>
              <td>".$row['leaveday']."</td>
              <td>".$row['regularholiday']."</td>
              <td>".$row['specialholiday']."</td>
            </tr>
        ';
    }

    $out .= '
            </tbody>
        </table>
    ';

    echo $out;
?>

注意我们如何构造一个字符串变量并通过隐式构造它。完成后,Justecho $out和新构建的HTML将出现在.done()AJAX代码块功能中。

请参阅以下其他AJAX示例和说明:

http://www.jayblanchard.net/basics_of_jquery_ajax.html

简单的“喜欢/不喜欢”文本按钮-添加Ajax等

将var传递给bootstrap modal,php将使用此值

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章