Ajax table doesn't show anything - php

Question

I'm creating a table using ajax and php but there's one problem, the table isn't showing in my div. I'm really new to ajax so I don't really fully understand it yet.
Here's my div:
<div class="body" id="live-data">
</div>
Here's the ajax code:
$(document).ready( function() {
function fetch_data() {
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
});
And here's fetch.php:
<?php
include('../global/db.php');
$output = '';
$sql ="SELECT * FROM students WHERE status = '0' AND stud_grade = '$level_id' ORDER BY date_enrolled DESC";
$result = mysqli_query($db, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th width="135" class="noExport">Action</th>
<th width="90">LRN</th>
<th width="20">Level</th>
<th>Name</th>
<th width="20">Gender</th>
<th width="60">Type</th>
<th width="105" style="font-size: 14px!important;">Date Enrolled</th>
</tr>
</thead>
<tbody>';
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
';
}
}
else {
$output .= '
<tr>
<td colspan="12">Data not Found</td>
</tr>';
}
$output .= '
</tbody>
</table>
</div>';
echo $output;
?>
It would great if anyone could help because I just don't know why it doesn't work
Edit:
I've changed the code so it returns the data in the console tab and here's what shows up:
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th width="135" class="noExport">Action</th>
<th width="90">LRN</th>
<th width="20">Level</th>
<th>Name</th>
<th width="20">Gender</th>
<th width="60">Type</th>
<th width="105" style="font-size: 14px!important;">Date Enrolled</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
</tbody>
</table>
</div>
So it clearly returns the correct data but it just doesn't show up in the live-data div

Answer 1

Maybe take a look in your html where is your div. Your div id says "live-data" and in the ajax code you mentioned to fetch data for div id "#live_data" instead of "#live-data".
Maybe changing them for same name can solve your problem. I would use for thr div id and in the ajax same id names like "#liveData".
Example (same code, just edited to the right IDs, compare with your original):
Your HTML div
<div class="body" id="liveData">
</div>
Your ajax code
$(document).ready( function() {
function fetch_data() {
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#liveData').html(data);
}
});
}
fetch_data();
});

Answer 2

Just append the correct Id of the div tag in sucess function