I have a PHP page that displays student results, and the option to update results of each line individually without the page refreshing.
But i would like the rest of the data on the page to be updated to reflect this change (overall % at the bottom of the table)
I initially created the AJAX Script, which submits and updates a Div (for testing to confirm it works, will remove this later), then i decided i wanted to update the rest of the page, and found a function else where on SO to do this...
Alone both functions work great, but when working along side eachother, the data will not submit without reloading the entire page, i thought it may be because i was calling the form through an include file, but when i disable to refreshtable() it still works ok.
Im pressuming its something simple, as my JQUERY Knowledge is very limited, ive checked in the console and im not receiving any errors.
JQUERY included in member_data.php:
<script type="text/javascript">
$(document).ready(function() {
refreshTable();
$('.update-results-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
// $('#ajax-response').html(data);
refreshTable();
}
});
});
function refreshTable(){
$('#table-holder').load('member_data_table.php', function(){
setTimeout(refreshTable, 5000);
});
}
});
</script>
MAIN PAGE member_data.php:
<?php
$_SESSION['member'] = $_GET['member'];
$matref = $_SESSION['member'];
$_SESSION['grade'] = $_GET['grade'];
$currentGradeID = $_SESSION['grade'];
include 'DBConnect.php';
$gradesresult = $conn->query("SELECT GradeID, beltcolour, style FROM grades");
?>
Change Grade:
<form action="member_data.php" method="GET"><input type="hidden" name="member" value="<?php echo $matref; ?>" />
<select name="grade">
<option selected> </option>
<?php
if ($gradesresult->num_rows > 0) {
// output data of each row
while($row = $gradesresult->fetch_assoc()) {
echo '<option value="' . $row["GradeID"] .'">' . $row["beltcolour"].
'</option>';
}
} else {
echo "No Grades Found";
}
?>
</select>
<input type="submit" value="Change Grade" />
</form>
Name
<div id="ajax-response"></div>
<div id='table-holder' >
<?php
include 'member_data_table.php';
?>
</div>
INCLUDED PHP PAGE (member_data_table.php):
<table style="width: 50%;" border = "1" cellpadding = "1">
<tbody>
<tr>
<td><b>Criteria</b> </td>
<td><b>Current Result </b></td>
<td><b>Update Result </b></td>
</tr>
<?php
include 'DBConnect.php';
$result = $conn->query(" QUERY ");
/* $result = $conn->query(" QUERY "); */
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['criteria']; ?> </td>
<td><?php echo $row['result']; ?> (<?php echo $row['updated']; ?>)</td>
<td>
<div id="result-update"> <form action="/update_result.php" method="post" class="update-results-form">
<input type="hidden" name="member" value="<?php echo $matref; ?>" >
<input type="hidden" name="grade" value="<?php echo $currentGradeID; ?>">
<input type="hidden" name="criteria" value="<?php echo $row['CriteriaID']; ?>">
<select name="result" class="dropdown">
<option selected=""></option>
<?php $resultdropdown = $conn->query("SELECT ResultID, result FROM results");
if ($resultdropdown->num_rows > 0) {
// output data of each row
while($row2 = $resultdropdown->fetch_assoc()) {
e cho '<option value="' . $row2["ResultID"] .'">' . $row2["result"]. '</option>';
}
} else {
echo "No Results Found";
}
?>
</select><input type="submit" value="update" />
</form> </div>
</td>
</tr>
<?php
}
} else {
echo '<tr> <td colspan="3"> No Data Found </td> </tr>';
}
?>
</tbody>
</table>