Chi Yang Chi Yang - 6 months ago 7
PHP Question

Having issue loading content using Ajax

I currently adding an auto reload function in my page to allow user to see the new content without refreshing whole page. This is the first time i using Ajax, do advise me if my codes are put at the wrong place.

This is my page's view :
enter image description here

This is what happen when my ajax code reload the content :

enter image description here

The reloaded data doesn't enter into the table cell.

This is how i call the table content from database and refreshing it every 30sec :

<?php include 'connectdb.php';
$result = mysqli_query($con,"SELECT tbluser.userId, tblorder.userId, tblorder.id, tblorder.from, tblorder.to, tblorder.itemCat, tblorder.itemName, tblorder.quantity, tblorder.size, tblorder.weight, tblorder.date FROM tbluser, tblorder WHERE tbluser.userId=tblorder.userId and tbluser.userLvlId='4'") or die ("Data not found !");
while ($rows =mysqli_fetch_array($result)) {

$orderid = $rows['id'];
$userid = $rows['userId'];
$from = $rows['from'];
$to = $rows['to'];
$itemCat = $rows['itemCat'];
$itemName = $rows['itemName'];
$quantity = $rows['quantity'];
$size = $rows['size'];
$weight = $rows['weight'];
$date = $rows['date'];

?>

<tr>
<td align="center" valign="middle"><?php echo $rows['id']; ?></td>
<td align="center" valign="middle"><?php echo $rows['userId']; ?></td>
<td align="center" valign="middle"><?php echo $rows['from']; ?></td>
<td align="center" valign="middle"><?php echo $rows['to']; ?></td>
<td align="center" valign="middle"><?php echo $rows['itemCat']; ?></td>
<td align="center" valign="middle"><?php echo $rows['itemName']; ?></td>
<td align="center" valign="middle"><?php echo $rows['quantity']; ?></td>
<td align="center" valign="middle"><?php echo $rows['size']; ?></td>
<td align="center" valign="middle"><?php echo $rows['weight']; ?></td>
<td align="center" valign="middle"><?php echo $rows['date']; ?></td>
<td align="center" valign="middle"><a href="edit order.php?userId=<?php print htmlentities($userid); ?>"><input type="button" value="EDIT" style="width:50px; height:30px; font-size:10px; text-align: center; padding-left:10px; padding-top:8px;"></a></td>
</tr>
<?php
}
?>

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#loadhere').load('ordertable.php')
}, 30000);
});




This is my html file :

<div id="content">
<div id="table">
<div id="title">
<a>ORDER DETAILS</a>
</div>
<table id="data" border="2" style=" margin: 0 auto; color:#3b3b3b;" >
<?php include 'ordertable.php'; ?>

<thead>
<tr>
<div style="height:10px;"></div>
<th>&nbsp;&nbsp;ORDER ID&nbsp;&nbsp;</th>
<th>&nbsp;&nbsp;USER ID&nbsp;&nbsp;</th>
<th>&nbsp;&nbsp;&nbsp;FROM (LOCATION)&nbsp;&nbsp;&nbsp;</th>
<th>&nbsp;&nbsp;&nbsp;TO (DESTINATION)&nbsp;&nbsp;&nbsp;</th>
<th>&nbsp;&nbsp;&nbsp;CATEGORY&nbsp;&nbsp;&nbsp;</th>
<th>&nbsp;&nbsp;ITEM NAME&nbsp;&nbsp;</th>
<th>&nbsp;QUANTITY&nbsp;</th>
<th>&nbsp;SIZE&nbsp;</th>
<th>&nbsp;WEIGHT&nbsp;</th>
<th>&nbsp;DATE&nbsp;</th>
<th>EDIT</th>
</tr>
</thead>

<tbody>
<div id="loadhere">

</div>
</tbody>
</table>
</div>
</div>


Do ask me for more details if you're not clear what my problem was. Thank you !

Answer

You're trying to set a div in a table, that's not possible. You can solve it to change this:

<tbody>
    <div id="loadhere">
    </div>
</tbody>

To

<tbody id="loadhere">
    //Here goes all the <tr><td></td></tr> etc
</tbody>

Hope this works!