同时更新数据库和页面内容

Question

这对我来说很难。这一过程共涉及五份文件。我不禁觉得我把这个问题复杂化了。我之前问过这个问题，我认为我理解了这个问题，但后来我尝试在等式中添加一个简单的“加载”模式，结果它坏了。更糟糕的是我不能让它工作了。我改变了太多。 是的，我知道我应该备份它，让我们过去吧。在整个元素中我根本无法更改的一种语言是我的 DB 语言，即 MySql。

---

我想要发生的事情

页面加载所有未归档的提交。数据是结构化的，以便为每行显示一些但不是全部数据。至少在用户单击“更多信息”按钮之前不会。 注意：这不是问题，但仅在这里，因为我还没有建立这个，我稍后会专注于这个。

在用户使用完一行中的数据后，我希望用户能够通过将“归档”字段从 0 更改为 1 来将数据归档到数据库中。完成后，我希望行消失。如果存在延迟并且需要超过一两秒的时间来完成此操作，则应出现一个加载模式，指示页面已收到请求并阻止用户多次按下“存档”按钮。

---

现在发生了什么

当页面加载时，所有未归档的数据都显示在行中，其中显示了表中每条记录的部分信息，但不是全部信息。当用户单击“更多信息”按钮时，没有任何反应。 注意：我不再关注这个问题，我知道如何解决这个问题。当用户点击“存档”按钮时，它什么也不做，但如果他们点击多次，最终会带来启动“加载”模式，然后刷新页面。应该消失的行仍然存在，记录仍然显示“0”而不是“1”。

---

给出代码前的最后评论

我对使用其他语言持开放态度，因为我学得很快，只是不知道如何整合它们。但是，如果您确实对此做出了回应，还请解释为什么我的方式较差以及我必须做些什么才能使这项工作有效。我还在学习 AJAX（非常初学者）和 PHP（中级......我认为）。

代码

index.php - 无头删节

<div class="container">
    <h1><span class="hidden">Locate My Pet</span></h1>
    <h2>Administration</h2>
    <p class="lead alert alert-info">Hello There! You can review and archive submitted requests here.</p>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="text-center">Submissions</h2>
        </div><!--/.panel-heading-->
        <div id="results"></div><!--To be populated by script-->
    </div><!--/.panel .panel-default-->
</div><!-- /.container -->
<footer class="footer">
    <div class="container">
    <p class="text-muted text-center">&copy; 2016 TL Web Development and Design</p>
    </div><!--/.container-->
</footer><!--/.footer-->
<div class="modal fade" id="archiveMessage" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Archiving Submission</h4>
            </div><!--/.modal-header-->
            <div class="modal-body">
                <p>Please wait . . .</p>
            </div><!--/.modal-body-->
        </div><!--/.modal-content-->
    </div><!--/.modal-dialog-->
</div><!--/.modal-->

submission.php

<table class="table table-responsive table-striped">
<tr>
    <th>Customer Name</th>
    <th>Address</th>
    <th>Contact</th>
    <th>Pet Info</th>
    <th>Tools</th>
</tr>
<?php
    require "../_php/connect.php";

    $get_all = "SELECT request_id, fName, lName, address, city, state, zip, pPhone, cPhone, email, pName, gender, spayedNeutered, howLost, comments, timeEntered, archived FROM requests";
    $result = $conn->query($get_all);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            if (!$row['archived']) {
                echo "<tr id='" . $row['request_id'] . "' class='fade in'>
                        <td>
                            " . $row['fName'] . " " . $row['lName'] . "</br>
                            <strong>Sent: </strong>" . $row['timeEntered'] . "
                        </td>
                        <td>" . $row['address'] . "</br>" . $row['city'] . " " . $row['state'] . ", " . $row['zip'] ."</td>
                        <td>
                            <strong>Primary Phone:</strong> <a href='tel:" . $row['pPhone'] . "'>" . $row['pPhone'] ."</a></br>
                            <strong>Cell Phone:</strong> <a href='tel:" . $row['cPhone'] . "'> " . $row['cPhone'] . "</a></br>
                            <strong>Email:</strong> <a href='mailto:" . $row['email'] . "'>" . $row['email'] . "</a></td>
                        <td>
                            <strong>Pet Name:</strong> " . $row['pName'] . "</br>
                            <strong>Gender:</strong> " . $row['gender'] . "</br>
                            <strong>Spayed or Neutered?:</strong> ";
                if ($row['spayedNeutered'] = 0) {
                    echo "No</td>";
                } else {
                    echo "Yes</td>";
                }
                echo    "<td>
                            <button class='btn btn-info'>More info</button></br>
                            <form action='../_php/archive.php' method='get'><input type='hidden' value='" . $row['request_id'] . "' id='row_id'><button type='submit' class='btn btn-warning archive'>Archive</button></form>
                        </td>
                    </tr>";
            }
        }
    } else if ($conn->connect_error != NULL) {
        echo "<tr><td colspan='5'><div class='alert alert-danger' role='alert'>Error: " . $conn->error . "</div></td></tr>";
    } else {
        echo "<tr><td colspan='5'><div class='alert alert-info' role='alert'>No Records were found.</div></td></tr>";   
    }
?>
<script type="text/javascript" src="../_js/query.js"></script>
</table>

connect.php - 出于安全原因未包含某些内容

// Create connection
$conn = new mysqli($servername, $username, $password, $dbName);

// Check connection
if ($conn->connect_error) {
    die("<tr><td colspan='5'><div class='alert alert-danger' role='alert'>Error: " . $conn->error . "</div></td></tr>)");
}

query.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $(".archive").click(function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
        });
    });
});

functions.php

<?php

require "connect.php"; // Connect to database       

    function archive($id) {
        require "connect.php";
        $archive = "UPDATE requests SET archived='1' WHERE request_id='$id'";
        if ($conn->query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['callArchive'])) {
        archive($_POST['callArchive']); 
    } else {
        archive(1);
    }
?>

Answer 1

由于存档按钮是动态加载的，因此最好选择使用 .on('click') 而不是在动态加载的元素上触发的 .click()。 Try to read the question and answeres here, specially the selected correct answer.

query.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $("#results .archive").on("click",function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
            //If you dont want to change your functions.php file use the commented line below instead of the above code
            //data: {'callArchive':id},
        });
    });
});

当用户点击“存档”按钮时，它什么也不做，但如果 如果多次点击，他们最终会弹出“加载” modal，然后刷新页面。应该消失的行 仍然存在，并且记录仍然显示“0”而不是“1” 它应该。

由于您的 ajax 调用数据包含帖子 'archive'，其中值为 id，并且您想要更新请求表的一些数据，但您正在检查
POST 的错误索引data(if (isset($_POST['callArchive'])))
宁可改成if (isset($_POST['callArchive']))

<?php   
    function archive($id) {
        require "connect.php";// Connect to database    
        $archive = "UPDATE requests SET archived='1' WHERE request_id='$id'";
        if ($conn->query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['archive'])) {
        archive($_POST['archive']); 
    } else {
        archive(1);
    }
?>

希望对你有所帮助：D