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 ?
ReplyDeletegreat .... simple and working!
ReplyDeletethanks
Perfect timing!
ReplyDeleteThis is just what I'm looking for! :)
Hi, its possible to edit with a select box and not only text?
ReplyDeletebeautifull thank u
ReplyDeleteAwesome! Great stuff, thanks for this!
ReplyDeleteThis is good... if you just want to edit text. I want one where custom functions can be passed like BBCODE(). :-P
ReplyDeleteHi, there's a little issue that I don't manage to fix.
ReplyDeleteWhen 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!
ReplyDeleteI really like your application and I have subscribed for your service but a bit of explanation can save a lot of time for us.
ReplyDeleteyou should post a version with multiple update columns.
ReplyDeleteas is done not to return to the same thing that you store ????????????????????????????????????
ReplyDeleteHi I got the same problem when I reload page everything come back to white and no text in there;(
ReplyDeleteI 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 ??
ReplyDeletei need repair pls
ReplyDeleteHey 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.
ReplyDeleteummm can you make a login and registration script to go with this? It's very pointless to just have the edit profile script.
ReplyDeleteThanks for that ... works well
ReplyDeletegood script....but why wont update sql page insert $_SESSION[USER_ID] in table query only works if type user_id manually
ReplyDeleteand 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.
ReplyDeletethis "sample" will appear \"sample\"
ReplyDeletewhy? what's the problem with " sign? why automatically added \
pls reply, it's me bongkie
Thank you !
ReplyDeletecheers DooD
ReplyDeletehelped 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.
ReplyDeleteplease send update at [email protected]
hi, i have problmes with à,è,ì.
ReplyDeleteit doesn't disply correctly this words....why?
Can you point your script users in the direction of a learning resource maybe to solve their issues if you don't have time to explain? This would be very helpful. Great work!
ReplyDeletenice :)
ReplyDeletethnk u man
ReplyDeletei like this but i create more than text box all text box update but edit button only one
ReplyDeletethank you
ReplyDeletebut how can i do it with more than one object such as first name, last name, email , etc. ?
ReplyDelete