PHP Inline Editing Data using jQuery AJAX

Submitted by alpha_luna on Tuesday, September 6, 2016 - 14:36.

In this tutorial, we are going to create PHP Inline Editing Data using jQuery AJAX. The previous tutorial, we create Inline Adding Data tutorial we have done in the same process using AJAX jQuery. This tutorial, we are going to edit the data in the database table in an inline form in the web page. The user will allow editing the data on clicking the content in the web page in the inline form. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

Create Simple Markup This simple source code shows the simple content that we have where the user can edit data in the inline form.

<table class="tbl-qa">
  <thead>
        <tr>
          <th class="table-header">Product Name</th>
          <th class="table-header">Product Quantity</th>
          <th class="table-header">Action</th>
        </tr>
  </thead>
  <tbody id="table-body">
        <?php
        if(!empty($row_product)) { 
        foreach($row_product as $k=>$v) {
          ?>
          <tr class="table-row" id="table-row-<?php echo $row_product[$k]["id"]; ?>">
                <td contenteditable="true" onBlur="saveToDatabase(this,'product_name','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);">
                        <?php echo $row_product[$k]["product_name"]; ?>
                </td>
                <td contenteditable="true" onBlur="saveToDatabase(this,'product_qty','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);">
                        <?php echo $row_product[$k]["product_qty"]; ?>
                </td>
                <td>
                        <a class="ajax-action-links" onclick="deleteRecord(<?php echo $row_product[$k]["id"]; ?>);">
                                Delete
                        </a>
                </td>
          </tr>
          <?php
        }
        }
        ?>
  </tbody>
</table>
<div class="add-data-style" id="add-more" onClick="createNew();">Add More</div>

Edit Query Copy and paste this simple query for edit function and save it as "edit.php".

<?php
require_once("database.php");
$query = new EditDataInlineForm();
$result_row = mysql_query("UPDATE tbl_products_inline set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);
?>

Output

Read Also: Inline Adding Data For the full source code, kindly click the "Download Code" button below. If you try all the examples, you will learn a lot about PHP, in a very short time! Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

637 views