数据库驱动的页面内容

I am trying to make a facebook style wall on my website. The goal is to insert form data, validate all forms as required, and store this data into a database. Simultaneously and separately I want all data stored in this database to be posted into a div that acts as the facebook wall.

I seem to have accomplished storing the data from the form. I can also retrieve all data in the database except it only does it when I submit the form. Which means no page content unless the user submits a post.

How can I populate my page with rows from my database when a user opens the page or before?

Please help!

Here is my php which stores and prints data when the html form is submitted.

<?php
  // Create connection
  $con=mysqli_connect("localhost","root","","test");

  if (mysqli_connect_errno())
  {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
  $sql="INSERT INTO test (school, confession)
  VALUES
  ('$_POST[school]','$_POST[confession]')";

  if (!mysqli_query($con,$sql))
  {
    die('Error: ' . mysqli_error($con));
  }
  echo "1 record added";

  //  print $_POST['college']."-<br />".$_POST['confession'];
  $result = mysqli_query($con,"SELECT * FROM test");

  while($row = mysqli_fetch_array($result))
  {
    echo "#" . $row['ID'] . " " . $row['confession'];
    echo "<br>" . "@" .$row['school'];
    echo "<br>" . "<br>";
  }

  mysqli_close($con);
?>

Here is my JS which posts to a div called content.

$(document).ready(function(){
  $("#subform").validate({
    submitHandler: function(form) {
      // do other stuff for a valid form
      $.post('test.php', $("#subform").serialize(), function(data) {
        $('#content').html(data);
      });
    }
  });
});

Another approach is to load data on mouse scroll like:

  //approx this
$(document).ready(function () {
    var flg='1';
    $(window).scroll(function () {
    console.log($(document).scrollTop());
    if ($(document).scrollTop() >299){
        if(flg=='1')
            {
        $.post( 'link to server side code', function( data ) {
            $('#morefrom').html(data.htmls);
        },'json');
         flg='0';
            }
    }
  });});

This way you can load data on a specific mouse scroll value(like if a user gets on the bottom of the page you load new rows) scrollTop docs

You can use a JavaScript Timer which will ticks after certain interval and load your Data, plus you must have to write a function that will just fetch the Data in your test.php file

function dataLoader()
{
   //load Data with GET Request $.get(. . . );
}

dataLoader();
setInterval(dataLoader, 1000);

or the Second option will to be use jquery Timer Library to achieve performance

Thanks for the replies I solved the problem. I just called the php on load.

    $(document).ready(function(){
    $("#subform").validate({
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('test.php', $("#subform").serialize(), function(data) {
                $('#subform').html(data);
            });
        }
    });
});