Best: Facebook Style Profile Edit script using jQuery, Ajax and PHP.

Author: Zeeshan Rasool | Last updated on July 22nd, 2010

AJAX, JQuery, PHP, Web Development

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.

[ad#co-2]

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 ');

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');
		
	});	
	
});

$(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;}

.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.';
	}	
?>

<?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;
	}
	
?>

<?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;

}

[ad#co-7]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com