I have 3 files for showing data when clicking a button.
How would I not keeping adding table when I each click the button?
I would like to get refreshed data each time when I click the button.
I have tried removing if the button id and data id equals, but it didn’t work.
Is there a simple way of doing?
- HTML based php script.
- JS for ajax for passing id of button, getting data from PHP script.
- PHP getting data from SQL but I will write the data for this post.
HTML based PHP
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MINI TEST</title>
</head>
<style>
.oldList td{
border: 1px solid gray;
background: lightblue;
}
.oldList{
width: 100px;
margin: 50px;
}
.showNewData td{
border: 1px solid gray;
background: lightgreen;
}
.showNewData{
width: 100px;
margin: 50px;
}
</style>
<body>
<?php
$oldList[] = array('1' => '1', '2' => 'mango','3' => '340');
$oldList[] = array('1' => '2', '2' => 'peach', '3' => '480');
foreach ($oldList as $value){
$idForList = $value['1'];
print "<table class='oldList'>";
print "<tr><td>".$value['1']."</td><td>".$value['2']."</td><td>".$value['3']."</td></tr>";
print "</table>";
print"<button class='newData' data-name='$idForList' id='$idForList'>{$idForList}NEW DATA</button>";
$idForNewData = "id" . strval($idForList);
print "<table class='showNewData' id='$idForNewData'></table>";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="mini_test_ajax.js"></script>
</body>
</html>
JS
$(document).ready(function(){
$('.newData').click(function(){
var gotId = $(this).data('name');
var idForNewData = "#id" + gotId;
$.ajax({
url: "mini_test_sql.php",
type: "POST",
data: {
"gotId": $(this).data("name")
},
success: function(data) {
console.log("success");
$.each(JSON.parse(data), function(key, value){
$(idForNewData).append("<td>" + value + "<td>");
});
},
error: function(xhr,XMLHttpRequest,errorThrown){
console.log("Fail");
console.log("xhr: " + xhr);
console.log("XMLHttpRequest: " + XMLHttpRequest);
console.log("errorThrown: " + errorThrown);
}
});
});
});
PHP
<?php
$idForList = $_POST['gotId'];
$productList[] = array();
$productList[0] = array(
'id' => "1",
'name' => "mango 2 ",
'price' => "280"
);
$productList[1] = array(
'id' => "2",
'name' => "peach 2",
'price' => "300"
);
if($idForList == 1){
echo json_encode($productList[0]);
}
if($idForList ==2){
echo json_encode($productList[1]);
}
?>
2
Answers
Easy, when you get data, empty table then put your data again in it
This part of code:
Should be something like this:
Pay attention that the id selector is ‘#’ and not ‘#id’.
Please try:
As mentioned by Ultrazz008, you are just trying to add the cell (td) to the table. However, the table contains rows (tr) and either row contains the cells (td).
It’s better to start IDs with letters (please, check here).
BR