Question posted in
You can find the official documentation here.

How to update table without adding new table on each button click? – Jquery ajax

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?

  1. HTML based php script.
  2. JS for ajax for passing id of button, getting data from PHP script.
  3. 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]);  
}

?>
Tags:

2

Answers


  1. 0

    Easy, when you get data, empty table then put your data again in it
    This part of code:

    $.each(JSON.parse(data), function(key, value){
       $(idForNewData).append("<td>" + value + "<td>");
});

    Should be something like this:

    $(idForNewData).html("");
var d = "<tr>";
$.each(JSON.parse(data), function(key, value){
          d += "<td>" + value + "<td>";
}); 
d += "</tr>";
$(idForNewData).html( d );
    Login or Signup to reply.
  2. 0

    Pay attention that the id selector is ‘#’ and not ‘#id’.

    Please try:

    var idForNewData =  "#" + gotId;

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search