Ajax, PHP, MySQL retrieve data

Question

i'm trying to auto retrieve data from mysql server in specific DIV without manual refresh the web page.

My PHP code is:

function lastCodes(){
 include('mysql.php');
 include('config.php');
echo "<div id='content_data'>";
 $get = mysql_query("SELECT * FROM scripts ORDER by date_added DESC");
 if(mysql_num_rows($get)>0){
 while($row = mysql_fetch_assoc($get)){
 $get2 = mysql_query("SELECT * FROM accounts WHERE username = '$row[s_owner]'");
 while($red = mysql_fetch_assoc($get2)){
 echo "<table>
 <tr>
 <td width='22px'>";
 if(!empty($red['avatar'])){
 echo "<center>
 <img src='$red[avatar]' style='width: 52px; height: 52px; margin-left: -30px; border: 2px solid #fff;' title='$row[s_owner]'/>
 </center>
 </td>";
 } else {
 echo "<td width='22px'>
 <center>
 <img src='/theme/$tema/icons/empty_avatar.png' style='width: 52px; height: 52px;' title='$row[s_owner]'/>
 </center>
 </td>";
 } 
 echo "<td>
 <a style='font-family: IndexName; color: #000; font-size: 14px; margin-left: 5px;'><b>$row[s_owner]</b> написа <a title='$row[s_name], Категория: $row[s_category].' href='#' style='text-decoration: none;'>нов код</a> <a style='font-family: IndexName; color: #000; font-size: 14px; margin-right: 10px;'>в $row[date_added]</a>
 </td>
 </tr>
 </table>";
 }
 }
 }
echo "</div>";
}

What should be in my case the jquery/ajax code if I want to retrieve this information in DIV called "content_data" in interval of 5 seconds? Thanks a lot!

• Bailey Parker: Google "ajax tutorial". If you want to use jQuery to make it easier, google "jQuery tutorial".

Answer 1

You could place the contents of your lastCodes() function inside an otherwise empty PHP file, let's call it lastCodes.php.

And then use the load function from JQuery on the page where you want to retrieve the data

<div id="divTarget"></div>
<script type="text/javascript">
 $("#divTarget").load("lastCodes.php");
</script>

But keep in mind that this way of coding can get messy real fast. I would recommend you to try any of the many great template systems available. It's not necessary for clean code but without one you will need some discipline keeping logic out of your view code.

And when you feel comfortable with one of those you could go even further and try a template system on the frontend using Javascript, for example Handlebars. With one of those you will be able to write clean code and send your data using JSON which will lower the size of the HTTP response and at the same time make the data more usable for other scenarios than simply rendering it as HTML.

Edit: To update the data every 5 seconds:

<script type="text/javascript">
 window.setInterval(function() { 
 $("#divTarget").load("lastCodes.php");
 }, 5000);
</script>

• SZ4: Ok, but it loads once and doesn't reload after 5 seconds and doesn't catch new data without refresh.
• Charlie Rudenstål: Try this: <script type="text/javascript"> window.setInterval(function() { $("#divTarget").load("lastCodes.php"); }, 5000); </script>

Answer 2

You just have to use the setInterval() function to load the contents of the page every 5 seconds(5000 milliseconds)

</div>
<script src="jquery.js"></script>
<script>
setInterval(function(){
 $('#container').load('page.php');
}, 5000);
</script>

I can see that you have a function so you might as well call it. If that doesn't work then try to put your code outside of the function.

lastCodes();

Be sure that its actually changing its contents and that the page that you're calling actually works, you can test it by accessing the page itself and see if it has any output.