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

时间：2016-01-05 04:18:07

标签： php jquery mysql ajax

这对我来说很难。这个过程共涉及五个文件。我不禁觉得我过度复杂化了这个问题。之前我曾经问过这个问题，并且我理解了这个问题，但后来我尝试在等式中加入一个简单的“加载”模态，然后它就破了。更糟糕的是我再也无法让它运转起来了。我改变了太多。 是的我知道我应该备份它，让我们过去。我在这整个元素中根本无法改变的一种语言是我的DB语言，即MySql。

我想要发生什么

页面加载所有未归档的提交。数据的结构使得每行显示一些但不是所有数据。至少在用户点击“更多信息”按钮之前。 注意：这不是问题，但这只是因为我没有这个问题，我会关注这一点。

用户使用完一行中的数据后，我希望用户能够通过将“archived”字段从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);
    }
?>

1 个答案:

答案 0 :(得分：1)

由于归档按钮是动态加载的，因此最好选择使用.on（＆＃39;点击＆＃39;）而不是.click（）不会在动态加载的元素上激活 。 Try to read the question and answeres here, specially the selected correct answer.

<强> query.js 

<!DOCTYPE html>
<html>
<head>
    <style>
        * {font-family: tahoma; font-size: 14px;}
        #text {margin-bottom: -3px;}
        #box {background-color: #ddd; width: 100%; height: 100px;}
    </style>
</head>

<body>
<div id="text">TEXT gjipq</div>
<div id="box"></div>
</body>
</html>
  

当用户点击＆＃34;存档＆＃34;按钮，它什么都不做，但如果   如果它多次点击它最终将会带来＆＃34; loading＆＃34;   模态然后刷新页面。应该消失的那一行   仍然存在，记录仍显示＆＃34; 0＆＃34;而不是＆＃34; 1＆＃34;如   应该。

由于您的ajax呼叫数据包含＆＃39; archive＆＃39; ，其中值为id，并且您想要更新请求表的某些数据但是您正在检查错误的索引POST数据（$(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}, }); }); }); ），而不是将其更改为if (isset($_POST['callArchive'])) 

if (isset($_POST['callArchive']))

希望有所帮助：D

相关问题
最新问题