Update 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>

$(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>

<?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>

</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

And, the next step: