Now a days, We are always looking for easiest way for people to interact with our Web Applications. I am going to tell you about In-Place Editing or Inline Editing.  Popular websites like facebook wants their user to edit their profile information without having to navigate to different form.

We normally implement this feature by tracking text regions for clicks & replacing those regions with text fields. Those fields send the changed text back to the server via Ajax. Previously I had published Advanced HTML5 tutorials on ClientSide, Offline & Geolocation

HTML5 Inline Editing with PHP, MYSQL & jQuery

But HTML5’s new attribute called contenteditable , It takes care of inline editing automatically. We should write little jQuery code to send the data back to the server, so we can save it. Biggest advantage is we don’t need to create and toggle hidden forms.

Contenteditable attribute that is available on almost every element. Simply adding this attribute turns any element into an editable field.

Some versions of IE don’t support this feature. But we can handle it with modifying our script a bit. We want to hide the link to the edit page and enable the Ajax support only If we have support for editable content.

HTML Table

HTML5 Inline Edit with PHP

<table class="table">
    <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">Karthikeyan</td>
        <td id="last_name:1" contenteditable="true">K</td>
        <td id="city:1" contenteditable="true">Chennai</td>
      </tr>
      <tr>
        <td>2</td>
        <td id="first_name:2" contenteditable="true">Facebook</td>
        <td id="last_name:2" contenteditable="true">Inc</td>
        <td id="city:2" contenteditable="true">California</td>
      </tr>
      <tr class="odd">
        <td>3</td>
        <td id="first_name:3" contenteditable="true">W3lessons</td>
        <td id="last_name:3" contenteditable="true">Blog</td>
        <td id="city:3" contenteditable="true">Chennai, India</td>
      </tr>
    </tbody>
 </table>

Please look at this code first_name:1, Here first_name is the table field name where as 1 is the primary_key of the table, used to update the record

How to Persist the data?

Although the users can change the data, their changes will be lost If they refresh the page or navigate away. We need a way to submit those changes to our back end & we can do that easily with jQuery.

$(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()},3000);
			}
        });
    });
});

We have added a event listenter to every td on the table that has contenteditable attribute set to true.

The Above jquery code will send the request to server whenever someone clicked the td region on the table

table_design

MYSQL Code to Update the Table Record

if(!empty($_POST))
{
	//database settings
	include "db_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";
}

View Live Demo & Download

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/04/html5.pnghttp://w3lessons.info/wp-content/uploads/2014/04/html5-150x150.pngKarthikeyan Khtml5jqueryPHPHTML5,Jquery,new techniques,php
Now a days, We are always looking for easiest way for people to interact with our Web Applications. I am going to tell you about In-Place Editing or Inline Editing.  Popular websites like facebook wants their user to edit their profile information without having to navigate to different form.We...