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.

  • gian

    I did everything right and installed it but ta giving error on line 41 see:

    PHP Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in E:\home\ducaleimoveis\Web\captador\facebook_style_edit99\textarea.php on line 41

    February 20 2012
    CommentsLike

    • good post .. :D

      January 18 2012
      CommentsLike
      • Houssem

        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

        December 05 2011
        CommentsLike
        • raz

          Nice…

          August 19 2011
          CommentsLike
          • henk

            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.

            August 08 2011
            CommentsLike

            • [...] 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 [...]

              March 08 2011
              CommentsLike

              • [...] 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 [...]

                January 31 2011
                CommentsLike
                • ZeeShaN

                  hi carmen, most scripts create problem with IE and IE is dead now :)

                  October 30 2010
                  CommentsLike
                  • carmen

                    Hello Zeeshan with ie9 this not work

                    best regrds

                    October 30 2010
                    CommentsLike

                    • 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.

                      October 15 2010
                      CommentsLike









                      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