CODEWITHSUNDEEP
phpmysqlajax
Avalon Parkes-barton
Avalon Parkes-barton

Reputation: 77

echo mysql value into table using Ajax

Im, using PHP,AJAX,html to display mysql data into a table, I have managed to pass the data across using ajax as i can display it in the dev console but i can't get it to output to the table, I think im either missing a bit or have written in the table part incorrectly but it doesn't return errors it just returns item.beacon.

EDIT: after a recommendation to use APPEND I have updated the code to the below but it returns neither a error or any data even though data is still present.

if there is any more information needed i will update the question to include it.

PHP

<?php
header('Content-type: application/json');
$servername = "localhost";
$username = "user";
$password = "password";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
#   header('Content-Type: applicaton/json');

$sql = "SELECT 
* 
FROM
(SELECT
  beacon,location,date,
  COUNT(location) AS counter 
FROM `track`
WHERE `date` = CURDATE() and `time` > NOW() - interval 60 second
GROUP BY beacon) AS SubQueryTable
ORDER BY SubQueryTable.counter DESC;";
$result = $conn->query($sql);


$result = mysqli_query($conn ,  $sql);
   $rows = array();
  while($r = mysqli_fetch_assoc($result)) {
  $rows[] = $r;
   }

   echo json_encode($rows);
$conn->close();
?>

HTML

<!DOCTYPE html>

<html>
 <head>
 <title>PHP MySQL</title>
 <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 </head>

 <body>
<script>
$(document).ready(function(){
 $.ajax({   
    type: "POST",
    url: "fetch.php",
    data: "getrow",
}).done(function( data ) {
    $('table').append('<tr><td>'+data['beacon']+'</td></tr><tr> <td>'+data['location']+'</td></tr>'); 
}).fail(function(jqXHR, textStatus) {
    alert('Request Failed');
});
}); 
</script>


<script src="vendor/jquery/jquery.min.js"></script>
<script>
var sec = 0;

function pad(val) {
return val > 9 ? val : "0" + val;
}
var timer = setInterval(function () {
$(".seconds").html(pad(++sec % 60));
$(".minutes").html(pad(parseInt(sec / 60, 10)));
}, 1000);
</script>
 </body>
</html>

Upvotes: 1

Views: 1476

Answers (1)

Nancy Moore
Nancy Moore

Reputation: 2470

Try the code below. I just commented the id because I do not see Id in your sql queries. Please ensure to include your jquery files.

If you try either get and post method 

  type: 'get',
   type: 'post',

Run the code below and it will work

        <script src="jquery-3.1.1.min.js" type="text/javascript"></script>



<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: 'fetch.php',
        type: 'get',
//type: 'post',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                //var id = response[i].id;
                var beacon = response[i].beacon;
                var location = response[i].location;


                var tr_str = "<tr>" +
                    "<td align='center'>" + (i+1) + "</td>" +
                    "<td align='center'>" + beacon + "</td>" +
                    "<td align='center'>" + location + "</td>" +
                    "</tr>";

                $("#userTable tbody").append(tr_str);
            }

        }
    });
});

</script>

    </head>
    <body>
        <div class="container">
            <table id="userTable" border="1" >
                <thead>
                    <tr>
                        <th width="5%">S.no</th>
                        <th width="20%">Beacon</th>
                        <th width="20%">Location</th>

                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </body>
</html>

Upvotes: 3

Related Questions