1

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>
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64

0 Answers0