Populate values from database in a table using PHP and AJAX

Question

I have a table that has the orders and I want when each order has entered the database I want it to be displayed in the table without refreshing the page and without pressing any button. Here is the code in PHP and HTML:

<?php
  require_once '../core/init.php';
  if(!is_logged_in()){
    header('Location: login.php');
  }
  include 'includes/head.php';
  include 'includes/navigation.php';

?>
<!-- Orders To Fill -->
<?php
  $txnQuery = "SELECT t.id, t.cart_id, t.first_name, t.last_name, t.description, t.txn_date, t.grand_total, c.items, c.paid, c.shipped
    FROM transactions t
    LEFT JOIN cart c ON t.cart_id = c.id
    WHERE c.paid = 1 AND c.shipped = 0
    ORDER BY t.txn_date";
  $txnResults = $db->query($txnQuery);
?>

<div class="col-lg-12">
  <h4 class="text-center">Orders To Ship       <span class="glyphicon glyphicon-list-alt" style="font-size:23px;"></span></h4>
  <table class="table table-sm table-bordered table-striped">
    <thead>
      <th></th><th>Name</th><th>Description</th><th>Total</th><th>Date</th>
    </thead>
    <tbody>
      <?php while($order = mysqli_fetch_assoc($txnResults)): ?>
        <tr>
          <td><a href="orders.php?txn_id=<?=$order['id'];?>" class="btn btn-sm btn-info">Details        <span class="glyphicon glyphicon-info-sign"></span></a></td>
          <td><?=$order['first_name']. ' '.$order['last_name'];?></td>
          <td><?=$order['description'];?></td>
          <td><?=money($order['grand_total']);?></td>
          <td><?=pretty_date($order['txn_date']);?></td>
        </tr>
      <?php endwhile; ?>
    </tbody>
  </table>
</div>

Please, how to do that in AJAX?

See https://stackoverflow.com/questions/5298401/basic-php-and-ajax — , Mar 28 '19 at 01:43
I saw that link, but still I can't do this in table :( Can you please help me! — Black P, Mar 28 '19 at 01:54

Francis G · Answer 1 · 2019-03-28T02:43:57.020

1

First of all try to research first on how to use Jquery AJAX. It's pretty easy. Create your PHP file containing the request to the database

<?php
      require_once '../core/init.php';
      if(!is_logged_in()){
        header('Location: login.php');
      }
      include 'includes/head.php';
      include 'includes/navigation.php';
      $txnQuery = "SELECT t.id, t.cart_id, t.first_name, t.last_name, t.description, t.txn_date, t.grand_total, c.items, c.paid, c.shipped
        FROM transactions t
        LEFT JOIN cart c ON t.cart_id = c.id
        WHERE c.paid = 1 AND c.shipped = 0
        ORDER BY t.txn_date";
      $txnResults = $db->query($txnQuery);

while($order = mysqli_fetch_assoc($txnResults)){
    $data = "
        <tr>
          <td><a href=\"orders.php?txn_id=\". $order['id'] ."\" class=\"btn btn-sm btn-info\">Details<span class=\"glyphicon glyphicon-info-sign\"></span></a></td>
          <td>".$order['first_name'].  " ". $order['last_name'] ."</td>
          <td>".$order['description'] ." </td>
          <td>". money($order['grand_total']) ."</td>
          <td>". pretty_date($order['txn_date']) ."</td>
                </tr>
        ";
}
echo $data;
?>

Then create the front end file that will get a request to the php file you created

<script>
function getdata(){
    $.ajax({
                url : "LINKTOYOURPHPFILE.php",
                success: function(data){
                    $("#table-to-be-inserted").html(data);
                }
        });
}
  //Call the function
   getdata();
</script>

<div class="col-lg-12">
  <h4 class="text-center">Orders To Ship       <span class="glyphicon glyphicon-list-alt" style="font-size:23px;"></span></h4>
  <table class="table table-sm table-bordered table-striped">
    <thead>
      <th></th><th>Name</th><th>Description</th><th>Total</th><th>Date</th>
    </thead>
    <tbody id="table-to-be-inserted">

    </tbody>
  </table>
</div>

That's a simple request. Here's a link of the Jquery Ajax, Please study it well CLICK ME TO STUDY JQUERY AJAX!!!!

edited Mar 28 '19 at 02:43

answered Mar 28 '19 at 01:55

Francis G

1,040
1
7
21

Ok, thank you. I made a PHP file called shipping.php and I added the PHP code and then I go back to the index.php where the original code was (The code that I wrote in the question) deleted the code and added the ajax code with the html code. But I got an empty table whenever data enters the database ... – Black P Mar 28 '19 at 02:34
Sorry didn't call the function. View the edited version – Francis G Mar 28 '19 at 02:36
Ok, I got an error now that says **Parse error: syntax error, unexpected 'btn' (T_STRING)**. It means this line `Details` – Black P Mar 28 '19 at 02:39
It's just a escape character error. I just write the answer in here. – Francis G Mar 28 '19 at 02:43
What do you mean ?? How to fix this ?? I just copied your code as it is... – Black P Mar 28 '19 at 02:48
Now, I'm getting a new error **Parse error: syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING)**. I'm afraid maybe it's from the button, I really don't know :( – Black P Mar 28 '19 at 02:55
can you please show the line where the error occur? It's just a error in string parsing – Francis G Mar 28 '19 at 02:58
On line 18, this line `Details` – Black P Mar 28 '19 at 03:00
1

Black P, just realized it's a new problem, and seems the ajax request is working. Please post another question regarding to this problem. – Francis G Mar 28 '19 at 03:09
What is the new problem ?? And what should I post in another question ?? Please help me :( – Black P Mar 28 '19 at 03:16
You see I your first question was to use ajax request in getting the data from php. And it works because there are no related ajax problem came up. Just a string parsing error. For the sake of your new problem can you add a console.log(data) after the line $("#table-to-be-inserted").html(data); and add it in here. – Francis G Mar 28 '19 at 03:22
Did you see the console output in the debug mode? – Francis G Mar 28 '19 at 03:29
When I press ctrl+right mouse button and choose inspect and went to console section I have this error `

( ! ) Parse error: syntax error, unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in ... on line 18

` – Black P Mar 28 '19 at 03:36
And what is the line 18 in your php file? – Francis G Mar 28 '19 at 03:48
The problem is ` – Mar 28 '19 at 03:55
And there goes my blind eye. – Francis G Mar 28 '19 at 03:59
You see the escaped last quote was needed for the ending value of the href attribute – Francis G Mar 28 '19 at 04:01
Ok, I fixed the error and here is the result. When I refresh the page only the first row is shown from the database. Second, all the values are in the same column not each value in its corresponding column ... – Black P Mar 28 '19 at 16:23
And in the console it says: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. – Black P Mar 28 '19 at 16:29
use concat in the $data, didn't see that, $data .= – Francis G Mar 29 '19 at 01:48

Populate values from database in a table using PHP and AJAX

1 Answers1