Facebook Like Profile Edit with Jquery
Wall Script
Follow Me:
Wednesday, April 28, 2010

Facebook Like Profile Edit with Jquery

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 Demo

Database 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,
);



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()
{

//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
<?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
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


31 comments:

  1. If I want to Show all row in Data base and put Edit after each one to modify, how can do it ?

    ReplyDelete
  2. great .... simple and working!

    thanks

    ReplyDelete
  3. Perfect timing!

    This is just what I'm looking for! :)

    ReplyDelete
  4. Hi, its possible to edit with a select box and not only text?

    ReplyDelete
  5. beautifull thank u

    ReplyDelete
  6. Awesome! Great stuff, thanks for this!

    ReplyDelete
  7. This is good... if you just want to edit text. I want one where custom functions can be passed like BBCODE(). :-P

    ReplyDelete
  8. 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 ! ;)

    ReplyDelete
  9. 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.

    ReplyDelete
  10. you should post a version with multiple update columns.

    ReplyDelete
  11. as is done not to return to the same thing that you store ????????????????????????????????????

    ReplyDelete
  12. Hi I got the same problem when I reload page everything come back to white and no text in there;(

    ReplyDelete
  13. 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 ??

    ReplyDelete
  14. 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.

    ReplyDelete
  15. ummm can you make a login and registration script to go with this? It's very pointless to just have the edit profile script.

    ReplyDelete
  16. Thanks for that ... works well

    ReplyDelete
  17. 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

    ReplyDelete
  18. great script but will not run in IE7 unfortunately.

    ReplyDelete
  19. this "sample" will appear \"sample\"
    why? what's the problem with " sign? why automatically added \
    pls reply, it's me bongkie

    ReplyDelete
  20. cheers DooD
    helped heaps

    ReplyDelete
  21. 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

    ReplyDelete
  22. hi, i have problmes with à,è,ì.
    it doesn't disply correctly this words....why?

    ReplyDelete
  23. 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!

    ReplyDelete
  24. i like this but i create more than text box all text box update but edit button only one

    ReplyDelete
  25. but how can i do it with more than one object such as first name, last name, email , etc. ?

    ReplyDelete

Make in India