I have written this simple application for readers who want Facebook like profile edit option in their web pages. the script is very simple & easy to understand. it needs a basic knowledge of Jquery and PHP.
Please write to me if you have some suggestions or problems…..
Table Structure
CREATE TABLE `fbusers` (
`uid` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`profile` TEXT NOT NULL
)
Index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.body
{
width:230px;
margin:50px;
}
.full_wrapper
{
border:1px solid #D8DFEA;
padding:5px;
width:230px;
}
.text_wrapper
{
padding:3px;
width:187px;
}
.prof_text
{
}
.edit_img{
height:20px;
width:20px;
margin:2px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:0px solid #D8DFEA;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Change style on edit link action
$('.edit_link').click(function()
{
$('.text_wrapper').hide();
var data=$('.prof_text').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
$('.full_wrapper').css('border','0px');
$('.editbox').css('border','1px solid #D8DFEA');
});
//Mouseup textarea false
$(".editbox").mouseup(function()
{
return false
});
$(".editbox").blur(function()
{
$('.full_wrapper').css('border','1px solid #D8DFEA');
$('.editbox').css('border','0px');
});
//Textarea content editing
$(".editbox").change(function()
{
$('.edit').hide();
var boxval = $(".editbox").val();
var dataString = 'prof='+ boxval;
$.ajax({
type: "POST",
url: "updProf.php",
data: dataString,
cache: false,
success: function(html)
{
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$('.edit').hide();
$('.text_wrapper').show();
});
});
</script>
</head>
<body>
<div class="body">
<div class="full_wrapper">
<a href="#" class="edit_link" title="Edit"><img src="edit.PNG" border="0" class="edit_img"></a>
<?php
include("../connect.php");
$uid=1; /*Use session id or user id for real life application*/
$query = mysql_query("select `profile` from `fbusers` where `uid`='$uid'") or die("There is a problem connecting to database!");
$row=mysql_fetch_array($query) or die("There is a problem connecting to database!");
$profile=$row['profile'];
?>
<div class="text_wrapper">
<div class="prof_text">
<?php echo $profile; ?>
</div>
</div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" ></textarea>
</div>
</div>
</div>
</body>
</html>
updProf.php
<?php
include("../connect.php");
if($_POST['prof'])
{
$prof=mysql_escape_string($_POST['prof']);
$uid=1;
mysql_query("update `fbusers` set `profile`='$prof' where `uid`='$uid'") or die("There is some problem.");
}
?>
nice and usefull. Thanks for sharing
Thnks Mitendra!