Update Profile Name With jQuery And Ajax In PHP

This article explains how to update a profile name with jQuery and Ajax in PHP.

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