Fetching data using PDO - php

Question

I have <table> that display data. I have a button if I click, the data will be displayed in #datacontainer. But the problem is "error: expects parameter 1" I don't know what that's mean. Please help me out of this problem
Here's my code
HTML - here's the table, imagine that I have 4 data in my table then when I clicked the button, the #datacontainer will show with the data.
<table>
<tr>
<th width="15%;">Image</th>
<th width="0">ID</th>
<th width="50%;">Name</th>
<th>Action</th>
</tr>
<?php while ($row = mysqli_fetch_array($accounts)) { ?>
<tr>
<td><img src="images/<?php echo $row['image']; ?>"></td>
<td><input type="hidden" id="text_id" value="<?php echo $row['id']; ?>"></td>
<td><?php echo $row['lastname']; ?>, <?php echo $row['firstname']; ?></td>
<td>
<i class="fab fa-reddit-alien" id="showdatacontainer" onclick="return chk()"></i>
<i class="far fa-edit" style="margin: 0 7% 0 7%;"></i>
<i class="fas fa-trash"></i>
</td>
</tr>
<?php } ?>
</table>
<div id="datacontainer"></div>
and here's my script
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function chk()
{
var id = document.getElementById('text_id').value;
var dataString = ':id='+ id;
$.ajax({
type: "post",
url: "showdata.php",
data:dataString,
cache:false,
success: function(data){
$("#datacontainer").html(data);
$("#datacontainer").slideToggle(300);
}
});
return false;
}
and here's my PHP that what I'm saying when I clicked the button. The error shows that "Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result" please help me out of this problem. I really don't know what that's problem. Thankyou
<?php
$db = mysqli_connect('localhost', 'root', '', 'psbr');
if (isset($_POST['id'])) {
$id = $_POST['id'];
$accountsdata = mysqli_query($db, "SELECT * FROM accounts where id=:id");
$statement = $db->prepare($accountsdata);
$statement->bindParam(":id", $id);
$statement->execute();
$data = $statement->fetchAll(PDO::FETCH_ARRAY);
}
?>
<table>
<tr>
<td class="w"><h1>Name</h1></td>
</tr>
<?php while ($row = mysqli_fetch_array($data)) { ?>
<tr>
<td><?php echo $val['lastname']; ?></td>
</tr>
<?php } ?>
</table>

Answer 1

you are mixing mysqli and pdo see here:
</tr>
<?php while ($row = mysqli_fetch_array($data)) { ?>
<tr>
you need to change:
<table>
<tr>
<td class="w"><h1>Name</h1></td>
</tr>
<?php while ($row = mysqli_fetch_array($data)) { ?>
<tr>
<td><?php echo $val['lastname']; ?></td>
</tr>
<?php } ?>
</table>
With:
<table>
<tr>
<td class="w"><h1>Name</h1></td>
</tr>
<?php foreach ($data as $val) { ?>
<tr>
<td><?php echo $val['lastname']; ?></td>
</tr>
<?php } ?>
</table>
And you are passing wrong dataString in your ajax code.
Change:
var id = document.getElementById('text_id').value;
var dataString = ':id='+ id;
$.ajax({
type: "post",
url: "showdata.php",
data:dataString,
cache:false,
success: function(data){
$("#datacontainer").html(data);
$("#datacontainer").slideToggle(300);
With
var id = document.getElementById('text_id').value;
$.ajax({
type: "post",
url: "showdata.php",
data:{'id':id},
cache:false,
success: function(data){
$("#datacontainer").html(data);
$("#datacontainer").slideToggle(300);