accepted ways of submitting and retrieving data using jquery ajax - php

Question

what is the most accepted way of retrieving data without reloading, ive seen tutorials use echo encode_json(array), the tutorial im following doesnt use it, instead.. i think he opts to get the HTML area of a specific PHP page.
my index.php
$("#button").click(function() {
... some code here ....
$.ajax
({
type: "POST",
url: "update.php",
data: dataString,
dataType: 'html',
cache: false,
success: function(html)
{
$("#posts").prepend(html);
$("#posts").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
}
});
});
Upon success, I want to retrieve the data from my MYSQL and print it on my #posts DIV.
my update.php includes
inserting data into mysql
selects/retrieve data from mysql
echoes the data from mysql_query
<?php
include("connect.php");
if (isset($_POST['submit']))
{
$status = $_POST['status']; //get textarea value
mysql_query("insert into messages (msg) values ('$status')");
}
$sql = mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$row = mysql_fetch_array($sql);
$msg = $row['msg'];
$msg_id = $row['msg_id'];
?>
<!-- get this part -->
<li id="posts">
id:<?php echo $msg_id; ?>
text: <?php echo $msg; ?>
</li>
basically, i just want to submit a post, and displays all the posts without reloading.

Answer 1

You are definitely on the right track.
However you are trying to insert something with an id="posts" into an element which is already on the page with the same ID which is not correct.
Perhaps make a wrapper div with a class of posts-container and then you can return say this from PHP:
<li class="post">
id:<?php echo $msg_id; ?>
text: <?php echo $msg; ?>
</li>
and add it to your page like this:
$.ajax
({
type: "POST",
url: "update.php",
data: dataString,
dataType: 'html',
cache: false,
success: function(html)
{
$(".post-container").prepend(html);
$(".post-container").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
},
//adding an error function
error: function(error){
//do whatever you need to handle you error here
console.log(error);
}
});