自动刷新DIV标记内的PHP中的表单不起作用

Question

I have the following two pages. The index.php includes purchases_pending.php through PHP. The first time the page loads the form works perfectly but when the DIV(#pp) is refreshed after 10 seconds the FORM does not work. Is there a solution for this? Or if I can do it through AJAX, can somebody help me with the code. As you have seen my codes you'll probably know Im a beginner. Thanks in advance.

index.php

<script type="text/javascript">
function update(){
    $('#pp').load('/status/purchases_pending.php');
}
setInterval( update, 10000 );
</script>
<div class="content">
<div class="content_left">
<p>
<h3>Pending Purchases</h3>
<div class="user_content"><div id="pp"><?php include ($purchases_pending); ?></div></div>
</p>

purchases_pending.php

<?php
$CONFIG = $_SERVER["DOCUMENT_ROOT"]. "/config/";
include($CONFIG. "pages.php");
include($db);

$sql = "SELECT * FROM account WHERE status='Pending' AND type='Purchase'";
$query = mysqli_query($conn, $sql);

if (mysqli_num_rows($query) > 0) {

echo '<table>';
echo '<tr> <th align="left">Party</th> <th>Box</th> <th>Rate</th> <th>Status</th> </tr>';
while ($result = mysqli_fetch_assoc($query)) {

$id = $result['id'];
$party = $result['party'];
$box = $result['box'];
$rate = $result['rate'];
$amount = $result['amount'];
echo '<form action="" method="post">';
echo '<tr>';
echo '<td>' . $party . '</td>';
echo '<td align="center">' . $box . '</td>';
echo '<td align="right">' . $rate . '</td>';
echo '<td align="center"><input type="checkbox" name="status[]" id="status[]" value="' . $id . '" /></td>';
echo '</tr>';
}
echo '</table>';
echo '<input type="submit" name="submit" value="Completed" class="input" />';
echo '</form>';
}
else {
    echo 'Hooray...No pending purchases';
}

if(isset($_POST['submit']) && $_POST['submit']!="") {
$status = $_POST['status'];
$count = count($_POST['status']);
for($i=0;$i<$count;$i++) {
$update_purchases = "UPDATE account SET status='Completed', user_confirm='$user_confirm' ,user_confirm_time=current_timestamp WHERE id='$status[$i]'";
$query_purchases = mysqli_query($conn, $update_purchases);
}
header ('location:/');
}
?>

Answer 1

JS load needs to be in document ready in order to work.

Short hand is

$(function() { 

    var update = function() {              

       $('#pp').load('/status/purchases_pending.php');

       setTimeout(update, 10000);
    }

    update();

});

Move this code to index.php as this no longer exist in the page because it gets removed when replacing div #pp

if(isset($_POST['submit']) && $_POST['submit']!="") {
    $status = $_POST['status'];
    $count = count($_POST['status']);
    for($i=0;$i<$count;$i++) {
    $update_purchases = "UPDATE account SET status='Completed', user_confirm='$user_confirm' ,user_confirm_time=current_timestamp WHERE id='$status[$i]'";
    $query_purchases = mysqli_query($conn, $update_purchases);
}

To explain php renders from the server as html, it reads top to bottom. So when the js inserts it, it is not inserting the code, but rather the rendering of the code. Ajax is used to send data, but on load no data is being sent other than give me a form. The post doesn't exist because it is already rendered. When using an include it is "inserted" as part of the code to be executed and thus works.

Answer 2

load the JS function outside the jquery

<script>
  function update(){
    $('#pp').load('/status/purchases_pending.php');
  }
</script>

 $( document ).ready(function() {   
    setInterval( update, 10000 );

 });