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!

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>