Jul
15

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

Author ZeeShaN    Category AJAX, JQuery, PHP, Web Development     Tags , , ,

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

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.







Enter your Email:

Click Here for Popular

Who I Am

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan

zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Tags

Comments