This tutorial will show how to build an application where the values gets updated in the database without any refresh being required just like how Facebook updates its status.The simplest way to do it is using the jquery.
Since it gives many functions like post and get which talk asynchronously with the servers without requiring any page refresh.
UPDATED POST with Facebook Api integeration LINK: http://www.webtuts.info/webdevelopment/facebook-api-integeration/143/
Since we are going to use the ajax using the jquery add up the jquery file in to the working directory.
Apart from the jquery file we need to code three .php files for this
1.Index.php
2.insert.php
3.retrive.php
Where Index.php file is going to be the user interface area while the insert and retrive file does the insertion and retrival of datas from the database.
Index.php
javascript
<script>
$(document).ready(function()
{
$.post('retrive.php',{},
function(output)
{
$('#result').prepend($(output).fadeIn('slow'));
});
});
function insert()
{
var divElement = document.createElement('div');
divElement.id = 'myDiv';
divElement.setAttribute('align','center');
divElement.className = 'myDivClass';
$.post('insert.php',{status:form.status.value},
function(output)
{
$('#result').prepend($(output).fadeIn('slow'));
$('#update').attr('value', 'whats on your mind');
});
}
</script>
Html file:
<form name="form">
<input name="status" type="text" id="update" value="Whats on your mind?" onclick="this.value='';" onblur="if(this.value == '') { this.style.color='#777777'; this.value='Whats on your mind?'}" />
<input type="button" id="but" onclick="insert();" value="share" />
</form>
EXPLANATION:
-$post() in jquery is used to make an ajax call to pass the value that has been typed in the status text box to the insert.php file.This doesnt need any page refresh.
-Since the divs has to be created dynamically wheen the uesr updates the status document.createElement() is used in the javascript to create divs.For further reference check links of dynamic div tutorial
-When the document loads all the values in the database are loaded and displayed.This happens in the retrive.php.
INSERT.php
<?php
$link = mysql_connect('localhost','root','');
$db_selected = mysql_select_db('saru', $link);
$status=mysql_real_escape_string($_POST['status']);
mysql_query("INSERT INTO status (str) VALUES ('$status')");
echo "<div id='myDiv' class='myDivClass'> <img src='webtuts.jpg' float=left id='im'/> <f>webtuts:</f><br/><div id='g'>$status</div> </div> ";
//echo $status;
//echo " <br/> ";
?>
RETRIVE.php
<?php
$link = mysql_connect('localhost','root','');
$db_selected = mysql_select_db('saru', $link);
$result = mysql_query("SELECT * FROM status ORDER BY id DESC");
$num=mysql_num_rows($result);
while($row = mysql_fetch_array($result))
{
$temp = $row['str'];
echo "<div id='myDiv' class='myDivClass'> <img src='webtuts.jpg' float=left id='im'/> <f>webtuts:</f><br/><div id='g'>$temp</div> </div>";
}
?>
