Edit in place using Jquery

Jquery edit in place or inline edit is one of the powerful tools to update the content quickly. In this article am going to explain you how to create Jquery edit in place or Jquery inline editor using JQuery, PHP and MYSQL. When Web technology is developing day by day, control over web content also need to be easier and quicker. Jquery edit in place text editor will be the best option to edit the small piece of data over the web pages.

Edit in Place Jquery text Editor

You can view demo and download how to Create Edit in Place or Inline Text Editor:

Live Demo Download

Okay. Now we are going to create an edit in Place text editor using Jquery, PHP and MYSQL.

Creating the Basic PHP file for Edit in Place:

First you need to create a simple PHP file, add the below HTML code and save it as index.php inside the root folder. Download and attach the latest jquery library to index.php file.

<div class="page" id="page">
	<input type="hidden" id="hidden" id="hidden" value="">
	<ul>
		<li><span class="edit" id="name" data="Click here to enter Name">Click here to enter Name</span></li>
		<li><span class="edit" id="email" data="Click here to enter Email">Click here to enter Email</span></li>
		<li><span class="edit" id="phone" data="Click here to enter Phone">Click here to enter Phone</span></li>
	</ul>
</div>

Styling the Edit in Place text Editor:

Now create an empty CSS file and link it to PHP file. Add some basic HTML styling properties. Now copy and paste the below CSS styling properties to your CSS file.

ul{
	width:460px;
	padding: 0;
	margin: 0 auto;
}
ul li{
	padding: 8px 22px;
	margin: 6px 0;
	list-style: none;
	border-bottom: dashed 1px #CCC;
}
ul li:hover{
	color:#218dbb;
	background: url(../images/pencil.png) no-repeat left center;
	cursor: pointer;
}
.textbox{
	padding:6px;
	border:solid 1px #CCC;
	width:260px;
}

Jquery functions for Place text Editor:

Next we are going to write the Jquery function for Edit in Place editor.

$(function(){
//Call the edit function
$('.edit').click(function(){
// Get the id name
var element=this;
var id=element.id;

//New text box with id and name according to position
var textboxs='<input type="text" name="text'+id+'" id="text'+id+'" class="textbox" >'

//Place textbox in page to enter value 
$('#'+id).html('').html(textboxs);

//Set value of hidden field
$('#hidden').val(id);

//Focus the newly created textbox
$('#text'+id).focus();
});

// Even to save the data - When user clicks out side of textbox
$('.edit').focusout(function(){
//Get the value of hidden field (Currently editing field)
var field = $('#hidden').val();

//get the value on text box (New value entred by user)
var value = $('#text'+field).val();

//Update if the value in not empty
if(value!='')
{
//Post to a php file - To update at backend
$.post('classes/savetag.php',{action:this.id,value:value}, function(response){
});
//Set the data attribue with new value
$(this).html(value).attr('data',value);
}

// If user exists with out making any changs
$(".edit").each(function(){
//set the default value
$(this).text($(this).attr('data'));
}); 

});
})

Create the Database:

We are almost done. Next step is updating the table when user editing the value. Create a MYSQL table called users with name, email and phone as table columns.

Update the back end Value:

Final step! Create a php file called savetag.php and save inside the directory called classes. Connect the mysql using PHP and wrire update query like below.

//Connect to MYSQL Database
$connect=mysql_connect("localhost","root");

//Select The database
$db=mysql_select_db("database_name",$connect);

//Update query String
$query="UPDATE  `users` SET `".$_POST['action']."` =  '".$_POST['value']."' WHERE  `id` =1 LIMIT 1 ;";

//Update query
$update=mysql_query($query);

//If Query updated successfully print 'OK'
if($update){
	echo 'OK';
}

Update the back end Value:

Run Now. When you click on the text jquery will come up with a text box and let you to enter new value. Next when you click outside of textbox it will take the value and update in backend and also in age too.

Bottom line:

Hope this will help you. You are welcome for any updation in this script to make it works better. Simply comment below with you upgraded script I will update it in this article with your name as guest author. Feel free to comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>