PHP MySQL Inline Editing using jQuery Ajax

In this tutorial we are going to see about PHP inline editing using jQuery AJAX. Previously in AJAX Add Edit Delete tutorial we have done the same by using jQuery show/hide.

In this example, we are using HTML contenteditable property to handle inline editing. we set this property as true which will allow user to edit content on clicking the content.

View Demo


HTML Editable Content

This code shows the HTML table elements with contenteditable property.

<table class="tbl-qa">
		<th class="table-header" width="10%">Q.No.</th>
		<th class="table-header">Question</th>
		<th class="table-header">Answer</th>
  foreach($faq as $k=>$v) {
	  <tr class="table-row">
		<td><?php echo $k+1; ?></td>
		<td contenteditable="true" onBlur="saveToDatabase(this,'question','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["question"]; ?></td>
		<td contenteditable="true" onBlur="saveToDatabase(this,'answer','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["answer"]; ?></td>

Call Update via jQuery AJAX

This script will be invoked on the blur event of the editable content. It will call PHP MySQL update via AJAX by sending the modified content.

function saveToDatabase(editableObj,column,id) {
	$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
		url: "saveedit.php",
		type: "POST",
		success: function(data){

PHP MySQL Update

This PHP file is called via AJAX to execute MySQL update query for the edited content.

$db_handle = new DBController();
$result = mysql_query("UPDATE php_interview_questions set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);

View DemoDownload

This PHP code tutorial was published on March 5, 2015.

↑ Back to Top