Best: Facebook Style Profile Edit script using jQuery, Ajax and PHP.
There will be many tutorials on facebook style scripts over internet but I always try to create some perfect and original looking tutorials that a user want. You can find many useful tutorials at 99points.info which rocks you always. Here is a facebook style profile edit script with demo that is created using jquery and ajax. Hope you will like it.
Database Structure
CREATE TABLE IF NOT EXISTS `facebook_edit_info` ( `id` int(11) NOT NULL, `user_text` text NOT NULL ) INSERT INTO `facebook_edit_info` (`id`, `user_text`) VALUES (1, 'http://www.99Points.info PHP, jQuery, Ajax and Codeigniter Tutorials ');
jQuery Code
$(document).ready(function(){ // height of textarea should be equal to text height $("#profile_text_area").css('height', parseInt($(".main_box").height() + 60)); // grow text area when typing $('textarea').elastic(); // on clicking edit link hide main box $('.edit_link').livequery("click", function(e){ $.post("edit_data.php", { }, function(response){ $(".main_box").hide(); $(".edit_box").show(); // show text area box $("#profile_text_area").val(response); $("#profile_text_area").focus(); $(".blurb_inner").css('border', 'none'); // hide out side border }); }); $('#profile_text_area').livequery("blur", function(e){ var text = $("#profile_text_area").val(); $.post("textarea.php?text="+text, { }, function(response){ //$('#profile_text_area').val(response); $(".edit_box").hide(); $(".main_box").fadeIn('slow'); $('.main_box').html(response); }); $(".blurb_inner").css('border', 'solid #6699CC 1px'); }); });
CSS
.blurb_inner { font-family:Arial, Helvetica, sans-serif; border:solid #6699CC 1px; width:205px; font-size:12px; color:#000000; } .main_box{ width:165px; float:left; padding:5px;} .main_box a{ color:#000000; text-decoration:none;} .main_box a:hover{ text-decoration:underline;} a.edit_link{background:url(pen.png) center center no-repeat; cursor:pointer; margin-left:5px; margin-top:3px; display:block; height:18px; width:18px; float:left;} a.edit_link:hover{ background:url(penhover.png) center center no-repeat; cursor:pointer;display:block; height:18px; width:18px; float:left; } .edit_box{width:165px; float:left;padding:0px;} #profile_text_area{ padding:0px;border:solid #6699CC 1px; margin:0px;}
textarea.php
<?php include('dbcon.php'); function clickable_link($text = '') { $text = preg_replace('#(script|about|applet|activex|chrome):#is', "\\1:", $text); $ret = ' ' . $text; $ret = preg_replace("#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href=\"\\2\" target=\"_blank\">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href=\"http://\\2\" target=\"_blank\">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>", $ret); $ret = substr($ret, 1); return $ret; } function checkValues($value = '') { $value = trim($value); if (get_magic_quotes_gpc()) { $value = stripslashes($value); } $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); $value = strip_tags($value); $value = mysql_real_escape_string($value); $value = htmlspecialchars($value); return $value; } $updated_text = ''; $updated_text = checkValues(@$_REQUEST['text']); if($updated_text) //if text has been updated then insert new text { mysql_query("update facebook_edit_info set user_text = '".$updated_text."' where id = 1"); } $result = mysql_query("SELECT * FROM facebook_edit_info"); $num_rows = mysql_num_rows($result); $text = ''; if($num_rows > 0) { while ($row = mysql_fetch_array($result)) { $text = $row['user_text']; } echo clickable_link($text); } else { echo 'Write something about yourself.'; } ?>
edit_data.php
<?php include('dbcon.php'); $result = mysql_query("SELECT * FROM facebook_edit_info where id = 1"); $num_rows = mysql_num_rows($result); $text = ''; if($num_rows > 0) { while ($row = mysql_fetch_array($result)) { $text = $row['user_text']; } echo $text; } ?>
Who I Am

Zeeshan Rasool
Software Engineer - PHP
Lahore - Pakistan
zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85
Categories
- AJAX (37)
- Codeigniter (16)
- CSS (16)
- Facebook (11)
- Joomla (1)
- JQuery (53)
- Miscellaneous (4)
- Mootools (1)
- MySQL (6)
- PHP (60)
- SEO (2)
- Technology (6)
- Tutorials (15)
- Twitter (2)
- Web Design (23)
- Web Development (57)
- WordPress (2)
Tags
99points
adobe
AJAX
ajax pagination
ajax rating
ajax tutorial
ajax voting system
captcha
Codeigniter
codeigniter 2.0
codeigniter recaptcha
CSS
css tutorials
dreamweaver cs5
Facebook
facebox
farmville
ffmpeg
flv
google api
hacking
Joomla
JQuery
JQuery Gallery
JQuery menus
Jquery tutorial
mafia war
Mootools
MySQL
pagination
Payment
PHP
php curl
recaptcha
RSS Feed
SEO
simplepie
socail networking
ssl
Tutorials
Twitter
wall script
Web
XSS
youtube
Comments
- ZeeShaN on Facebook Wall Script Clone with JQuery and PHP: Personal Project BETA Version 2.0
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on JQuery Based Flipped Image Gallery with Bounce Effects
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL
ZeeShaN







good post ..
Hi
It’s very nice script.
I would like to know if it is possible to use many textarea at the same time.
Thank you
Nice…
IE is what most users use, webmasters HAVE to program for IE. You are talking like a programmer, but you have to think like the end-user. If this doesn’t work in IE, I am outta here.
Oh, and the demo link doesn’t work.
[...] created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just download all files and add your [...]
[...] 100px so that small images should not be included. I have created this tutorial separate from our facebook profile edit. However if you want to add this functionality in that script just download all files and add your [...]
hi carmen, most scripts create problem with IE and IE is dead now
Hello Zeeshan with ie9 this not work
best regrds
Box.Net
The file you are trying to download is currently not available, please try again in a few minutes. If you continue having issues please email support@box.net for support.
[...] created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just download all files and add your [...]