Introduction
This article explains how to update a profile name with jQuery and Ajax in PHP. This is very simple. First you will design a database and insert a profile name or data for updating In the next step you will write some jQuery code. Then you will write some PHP and HTML code. In the PHP code I will write a query for selecting data from MySQL and print them and create a link for editing or updating this data. This technique is mostly used for Facebook profiles and such.
This is your table architecture:
CREATE TABLE `test` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(100) NULL ,
`password` VARCHAR(100) NULL ,
`post` TEXT
);
Example
This is your "config.php" file for creating a simple connection.
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database_name = "demo";
$con = mysql_connect($hostname, $username, $password) or die("error in your connection");
mysql_select_db("$database_name", $con) or die("error in your database");
?>
This is your edit "editPost.php" file and in this file I wrote a jQuery, Ajax and PHP code.
<html>
<head>
<style>
.displayBox
{
width:250px;
margin:100px;
}
.main
{
border:solid 2px #0099CC;
padding:2px;
width:250px;
}
.link
{
float:right
}
.change_box
{
overflow: hidden;
border:solid 2px #0099CC;
width:250px;
font-size:14px;
font-family: verdana, sans-serif;
padding:2px
}
</style>
<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()
{
$('.link').click(function()
{
$('.main').hide();
var data=$('.main').html();
$('.link').show();
$('.change_box').html(data);
$('.change_box').focus();
});
$(".change_box").mouseup(function()
{
return false
});
$(".change_box").change(function()
{
$('.link').hide();
var boxval = $(".change_box").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "edit.php",
data: dataString,
cache: false,
success: function(html)
{
$('.main').html(boxval);
$('.main').show();
}
});
});
$(document).mouseup(function()
{
$('.link').hide();
$('.main').show();
});
});
</script>
<div class="displayBox">
<a href="#" class="link" title="Edit Your Post">Edit Your Post</a>
<?php
ini_set('display_errors',0);
include("config.php");
$user_id=$session_id;
$sql=mysql_query("select post from test where user_id='$user_id'");
$row=mysql_fetch_array($sql);
$post=$row['post'];
?>
<div class="main"><?php echo $post; ?></div>
<div class="link" style="display:none">
<textarea class="change_box" cols="23" rows="3" ></textarea>
</div>
</div>
</body>
</html>
This is your "edit.php" file. In this file, first I wrote a query for updating the MySQL data.
<?php
session_start();
include("config.php");
if($_POST['data'])
{
$data=$_POST['data'];
$data = mysql_escape_string($data);
//$session_id=$_GET['id'];
$user_id=$session_id;
$sql = "update test set post='$data' where user_id='$user_id'";
mysql_query( $sql);
}
?>
Output
![your table data]()
And, the next step:
![show your profile]()
And, the next step:
![edit your profile]()
And, the next step:
![change profile data]()
And, the next step:
![changed profile]()
And, the next step:
![your updated profile]()