CONFIG.PHP
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'inline_edit');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
mysql_query ("set character_set_results='utf8'");
?>
SQL MODE
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 14, 2014 at 12:12 AM
-- Server version: 5.1.37
-- PHP Version: 5.3.0
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*Created By Hemant9807.blogspot.in*/
--
-- Database: `inline_edit`
--
-- --------------------------------------------------------
--
-- Table structure for table `user_details`
--
CREATE TABLE IF NOT EXISTS `user_details` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(50) NOT NULL,
`last_name` varchar(50) NOT NULL,
`city` varchar(50) NOT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `user_details`
--
INSERT INTO `user_details` (`user_id`, `first_name`, `last_name`, `city`) VALUES
(1, 'Hemant', 'Vishwakarma', 'Lucknow'),
(2, 'Ravi', 'Mani', 'America'),
(3, 'Ashutosh', 'Sharma', 'New Delhi');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
AJAX.PHP
<?php
if(!empty($_POST))
{
//database settings
include "config.php";
foreach($_POST as $field_name => $val)
{
//clean post values
$field_userid = strip_tags(trim($field_name));
$val = strip_tags(trim(mysql_real_escape_string($val)));
//from the fieldname:user_id we need to get user_id
$split_data = explode(':', $field_userid);
$user_id = $split_data[1];
$field_name = $split_data[0];
if(!empty($user_id) && !empty($field_name) && !empty($val))
{
//update the values
mysql_query("UPDATE user_details SET $field_name = '$val' WHERE user_id = $user_id") or mysql_error();
echo "Updated";
} else {
echo "Invalid Requests";
}
}
} else {
echo "Invalid Requests";
}
?>
HTML & JS & CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Inline Content Editing with jQuery, PHP & MYSQL</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function() {
var field_userid = $(this).attr("id");
var value = $(this).text();
$.post('ajax.php', field_userid + "=" + value, function(data) {
if (data != '') {
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function() {
message_status.hide()
}, 1000);
}
});
});
jQuery('.s_download').click(function() {
var semail = jQuery("#itzurkarthi_email").val();
if (semail == '') {
alert('Enter Email');
return false;
}
var str = "sub_email=" + semail
jQuery.ajax({
type: "POST",
url: "download.php",
data: str,
cache: false,
success: function(htmld) {
jQuery('#down_update').html(htmld);
}
});
});
});
</script>
<style>
table.zebra-style {
font-family: Sans-Serif;
text-align: center;
border: 1px solid #ccc;
margin-bottom: 25px;
width: 90%
}
table.zebra-style th {
color: #444;
font-size: 13px;
font-weight: normal;
padding: 10px 8px;
}
table.zebra-style td {
color: #777;
padding: 8px;
font-size: 13px;
}
table.zebra-style tr.odd {
background: #f2f2f2;
}
body {
font-family: Sans-Serif;
background: #fafafa;
}
.container {
width: 800px;
border: 1px solid #C4CDE0;
border-radius: 2px;
margin: 0 auto;
height: 1300px;
background: #fff;
padding-left: 10px;
}
#status {
padding: 10px;
background: #88C4FF;
color: #000;
font-weight: bold;
font-size: 12px;
margin-bottom: 10px;
display: none;
width: 90%;
}
</style>
</head>
<body>
<div class="container"><br>
<h4 style="text-align:center">HTML5 Inline Edit with jQuery Ajax, PHP & MYSQL - hemant9807.blogspot.in</h4>
<div id="status"></div>
<table class="table zebra-style">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td id="first_name:1" contenteditable="true">Hemant</td>
<td id="last_name:1" contenteditable="true">Vishwakarma</td>
<td id="city:1" contenteditable="true">Lucknow</td>
</tr>
<tr>
<td>2</td>
<td id="first_name:2" contenteditable="true">Ravi</td>
<td id="first_name:2" contenteditable="true">Mani</td>
<td id="first_name:2" contenteditable="true">America</td>
</tr>
<tr class="odd">
<td>3</td>
<td id="first_name:3" contenteditable="true">Ashutosh</td>
<td id="first_name:3" contenteditable="true">Sharma</td>
<td id="first_name:3" contenteditable="true">New Delhi</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
ReplyDeleteDot Net Course in Chennai
Testing Courses in Chennai
Java Course and Certification
PHP Training Institutes