我的jQuery腳本不起作用

Question

我有一個可以按年和月過濾數據的表格，在我離開工作之前可以正常工作，但是第二天就不工作了。 我正在使用jQuery，PHP和MySQLi。 有人可以幫我弄這個嗎？ 我似乎在我的代碼中找不到問題：

report.php

<?php
session_start();
if (!isset($_SESSION['username'])) {
    header('Location: filter.php');
}
else{
    $uname=$_SESSION['username'];
}
?>
<html>
<head>
<title>LADD DMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<link rel="icon" type="image/png/gif" href="pcflogo.png">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
body {
    background-image:url('bg.png');
}
.box {
    width:100%;
    padding:20px;
    background-color:#fff;
    border-radius:5px;
    margin-top:25px;
}
.navbar-default {
    background-color:teal;
}
.navbar-default .navbar-brand {
    color: white;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    border-bottom:2px solid whitesmoke;
    color:white;
}
li:hover {
    border-bottom:2px solid whitesmoke;
}
.button{
    display:inline
}
.modal-header {
    color:white;
    border-bottom:1px solid #eee;
    background-color: teal;
    -webkit-border-top-left-radius: -5px;
    -webkit-border-top-right-radius: -5px;
    -moz-border-radius-topleft: -5px;
    -moz-border-radius-topright: -5px;
     border-top-left-radius: -5px;
     border-top-right-radius: -5px;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: #f2f2f2;
}
.bootgrid-table th > .column-header-anchor {
    color:white;
    font-weight:bold;
}
.bootgrid-table th > .column-header-anchor:hover {
    color:black;
    font-weight:bold;
}
.footer {
    position: fixed;
    height:40px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: teal;
    color: white;
    text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">LADD DMS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a href="../blgd1/index2.php" >Home </a></li>
            <li><a href="../blgd1/index.php" style="color:white;">Documents</a></li>
            <li><a href="../blgd1/fileupload/index.php?categ=all" style="color:white;">Files</a></li>
            <li><a href="../blgd1/reports.php" style="color:white;">Reports</a></li>
            <li><a href="../blgd1/monthy.php" style="color:white;">View Documents monthly</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>  <a href="logout.php" style="color:white;">Welcome, <?=$_SESSION['username'];?> <span class="glyphicon glyphicon-off" aria-hidden="true" ></span></a> </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container box" style="background-image:url('bg.png'); ">
    <br />
    <div align="right">
    </div>
    <h1>Monthly Year</h1>
    <div id="ab">Monthly Filter:</div><select id="year" name="fetchby" class="form-control">
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
    </select>
    <h1>Monthly Report</h1>
<div id="ab">Monthly Filter:</div>
<select id="month" name="fetchby" class="form-control" >
    <option value="01">January</option>
    <option value="02">Febuary</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
</select>
<br>
<br>
<div class="table-responsive">
    <table class="table table-striped" style="font-size:15px;">
    <?php
    $conn = mysqli_connect('localhost','root','','dms');
    $query="select * from document";
    $output=mysqli_query($conn,$query);
    ?>
        <div class="table-responsive" >
            <table id="data-table" class="table table-striped">
                <thead style="background-color:teal;">
                    <tr>
                        <th >subject</th>
                        <th>type</th>
                        <th>date</th>
                        <th>Transaction</th>
                        <th>Signatories</th>
                    </tr>
                </thead>
            <tbody>
            <?php
            while($fetch = mysqli_fetch_assoc($output)) {
                echo '<tr>';
                echo '<td>'.$fetch['document_name'].'</td>';
                echo '<td>'.$fetch['document_type'].'</td>';
                echo '<td>'.$fetch['document_status'].'</td>';
                echo '<td>'.$fetch['document_date'].'</td>';
                echo '<td>'.$fetch['document_signatories'].'</td>';
                echo '</tr>';
            };
            echo '</table>';
            ?>
        </div>
    </div>
    <div class="footer">
        <h4>Copyright LADD KIDS 2018<h4>
    </div>
<script>
    $(document).ready(function() {
        $("#month").on('change',function()
            var month = $("#month").val();
            var year = $("#year").val();
            var keyword = year+"-"+month;

            $.ajax({
                url:'fetchreport.php',
                type:'POST',
                data:'keyword='+keyword,
                beforeSend:function() {
                    $("#table-container").html('Working...');
                },
                success:function(data) {
                    $("#table-container").html(data);
                },
            });
        });
    });

</script>
</body>
</html>

fetchreport.php

<?php
$conn = mysqli_connect('localhost','root','','dms');
$keyword=$_POST['keyword']; 
$query="SELECT * FROM document WHERE document_date LIKE '%".$keyword."%'";
$output=mysqli_query($conn,$query);
echo '<table border="1"';
    echo '<tr>
        <th>Subject:</th>
        <th>Type:</th>
        <th>Transaction</th>
        <th>Date Recieved/Released:</th>
        <th>Signatories:</th>
    </tr>';
while($fetch = mysqli_fetch_assoc($output)) {
    echo '<tr>';
        echo '<td>'.$fetch['document_name'].'</td>';
        echo '<td>'.$fetch['document_type'].'</td>';
        echo '<td>'.$fetch['document_status'].'</td>';
        echo '<td>'.$fetch['document_date'].'</td>';
        echo '<td>'.$fetch['document_signatories'].'</td>';
    echo '</tr>';
};

echo '</table>';
?>

Answer 1

從我看來，您沒有以table-container為ID的div或表

您應該在HTML的某處添加<div id="table-container"></div> 。 似乎從未顯示過php的結果

第二種錯字正如Rasclatt指出的那樣，您在php端的表定義中有錯字。

更改

echo '<table border="1"';

至

echo '<table border="1">'; #close

旁注：請使用准備好的語句來防止SQL注入攻擊

我的jQuery腳本不起作用

問題描述

1 個解決方案

解決方案1
3 已采納 2018-03-01 05:02:42

我的jQuery腳本不起作用

問題描述

1 個解決方案

解決方案1 3 已采納 2018-03-01 05:02:42

解決方案1
3 已采納 2018-03-01 05:02:42