This post is very special Facebook like profile edit with jquery, ajax and PHP. Why special before I was thinking this is little difficult but I had developed in just 5 minutes using jquery and php. Use this and enrich your web applications.
Download Script 
Live DemoDatabase Design
user table contains user_id, username, password and profile.
CREATE TABLE `users` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
updateprofile.php
Contains javascript, HTML and PHP code. Take a look at bold blue color class names.
<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()
{
{
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});
{
{
$('.edit').hide();
var boxval = $(".editbox").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "update_profile_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});
{
$('.edit').hide();
$('.text_wrapper').show();
});
});
</script>
$user_id=$session_id;
$sql=mysql_query("select profile from users where user_id='$user_id'");
$row=mysql_fetch_array($sql);
$profile=$row['profile'];
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Edit link action
$('.edit_link').click(function(){
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});
//Mouseup textarea false
$(".editbox").mouseup(function() {
return false
});//Textarea content editing
$(".editbox").change(function() {
$('.edit').hide();
var boxval = $(".editbox").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "update_profile_ajax.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>
//body part
<div class="mainbox">
<a href="#" class="edit_link" title="Edit">Edit</a>
// Displaying profile data from the users table
// Displaying profile data from the users table
<?php
include("db.php");$user_id=$session_id;
$sql=mysql_query("select profile from users where user_id='$user_id'");
$row=mysql_fetch_array($sql);
$profile=$row['profile'];
?>
<div class="text_wrapper"><?php echo $profile; ?></div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" ></textarea>
</div>
</div>
update_profile_ajax.php
Contains PHP code updating profile field at users table.
<?php
include("db.php");if($_POST['data'])
{
$data=$_POST['data'];
$data = mysql_escape_String($data);
$user_id=$session_id;
$sql = "update users set profile='$data' where user_id='$user_id'";
mysql_query( $sql);
}
?>
db.php
Database configuration file.
<?php
$mysql_hostname = "localhost";$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>
CSS code
body
{font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{width:250px;
margin:50px;
}
.text_wrapper
{border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{float:right
}
.editbox
{overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
If I want to Show all row in Data base and put Edit after each one to modify, how can do it ?
great .... simple and working!
thanks
Perfect timing!
This is just what I'm looking for! :)
Hi, its possible to edit with a select box and not only text?
beautifull thank u
Awesome! Great stuff, thanks for this!
This is good... if you just want to edit text. I want one where custom functions can be passed like BBCODE(). :-P
Hi, there's a little issue that I don't manage to fix.
When you have a carriage return, it's OK in the database but I doesn't display it when reloading the div with the new html content.
I tried to fix it with nl2br, but then
tags appear in the textarea ! :/
Got an idea ?
Thanks from France ! ;)
cool! thanks for sharing!
I really like your application and I have subscribed for your service but a bit of explanation can save a lot of time for us.
you should post a version with multiple update columns.
as is done not to return to the same thing that you store ????????????????????????????????????
Hi I got the same problem when I reload page everything come back to white and no text in there;(
I need to update more columns at a time.. Can u give me the solution ? How to add more text boxes update at a same time ??
i need repair pls
Hey Srinivas another great tut! I have got a question though. How can I update multiple textareas? I've been racking my brain on this one for like a week. So I figure I would ask you or if anyone else out there knows please share the knowledge.
ummm can you make a login and registration script to go with this? It's very pointless to just have the edit profile script.
Thanks for that ... works well
good script....but why wont update sql page insert $_SESSION[USER_ID] in table query only works if type user_id manually
and why on the update profile page you insert a session_id into sql table but then on the update page you select from where user_id='1'......
NOW why select from where user_id=1 when the session_id will be completly different
great script but will not run in IE7 unfortunately.
this "sample" will appear \"sample\"
why? what's the problem with " sign? why automatically added \
pls reply, it's me bongkie
Thank you !
cheers DooD
helped heaps
How can I update multiple textareas? I've been racking my brain on this one for like a week. So I figure I would ask you or if anyone else out there knows please share the knowledge.
please send update at taran_117@yahoo.co.in
hi, i have problmes with à,è,ì.
it doesn't disply correctly this words....why?