PHP MySQL Inline Editing Dynamically using jQuery Ajax

PHP MySQL Inline Editing Dynamically using jQuery Ajax

In this Post We Will Explain About is PHP MySQL Inline Editing Dynamically using jQuery Ajax – Inline TABLE With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Update mysql table using ajax and phpExample

In this post we will show you Best way to implement Live table edit using jQuery, AJAX and PHP – jQuery Ajax PHP, hear for Ajax table Add Edit Delete Rows Dynamically Using jQuery PHPwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

In this POST Example, we are using Simple HTML table to All the Manager list database results. We simple add the content all data Editable form input attribute to the table new cells to new allow inline editing on jquery and ajax clicking cell view.

Read Also:  Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Following files needed for this inline edit example

config.php 
index.php 
pagefunctions.js 
datasaveInlineEdit.php

External Libs. Add

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

DataBase Table and Records

CREATE TABLE IF NOT EXISTS 'manager' (
'id' int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
'man_name' varchar(255) NOT NULL COMMENT 'manager name',
'man_salary' double NOT NULL COMMENT 'manager man_salary',
'man_age' int(11) NOT NULL COMMENT 'manager age',
PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=58 ;
INSERT INTO 'manager' ('id', 'man_name','man_salary', 'man_age') VALUES
(1, 'ravi dholakiya', 380800, 48),
(2, 'jigar shah', 176750, 77),
(3, 'Ankit Pipaliya', 86000, 78),
(4, 'Naredra Modi', 439060, 55),
(5, 'yogi swami', 162700, 45),
(6, 'borak Aobama', 372000, 45),
(7, 'swati Dethariya', 189500, 59),
(8, 'kajal piparva', 327900, 55),
(9, 'sejal ramani', 205590, 77),
(10, 'swati bganderi', 109600, 25);

config.php

$server_name = "localhost";
$username = "root";
$password = "";
$dbname = "Pakainfo.com";
$conn = mysqli_connect($server_name, $username, $password, $dbname) or die(" simple Connection failed: " . mysqli_connect_error());

index.php

<?php
$sql = "SELECT id, man_name, man_salary, man_age FROM manager LIMIT 10";
$res_query = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
?>
<table class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>manager Name</th>
<th>man_salary</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
while( $data_results = mysqli_fetch_assoc($res_query) ) {
?>
<tr>
<td contenteditable="true" data-old_value="<?php echo $data_results["man_name"]; ?>" onBlur="datasaveInlineEdit(this,'man_name','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_name"]; ?></td>
<td contenteditable="true" data-old_value="<?php echo $data_results["man_salary"]; ?>" onBlur="datasaveInlineEdit(this,'man_salary','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_salary"]; ?></td>
<td contenteditable="true" data-old_value="<?php echo $data_results["man_age"]; ?>" onBlur="datasaveInlineEdit(this,'man_age','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_age"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>

pagefunctions.js

function datasaveInlineEdit(editparmvalue,coldata,id) {
// no change any data change made then return simple boolian false
if($(editparmvalue).attr('data-old_value') === editparmvalue.innerHTML)
return false;
// send from ajax to PHP update value mysqli
$(editparmvalue).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "datasaveInlineEdit.php",
type: "POST",
dataType: "json",
data:'coldata='+coldata+'&value='+editparmvalue.innerHTML+'&id='+id,
success: function(response) {
// set updated value as simple old value
$(editparmvalue).attr('data-old_value',editparmvalue.innerHTML);
$(editparmvalue).css("background","#3D3D3D");
},
error: function () {
console.log("errr");
}
});
}

datasaveInlineEdit.php

<?php
$sql = "UPDATE manager set " . $_POST["coldata"] . " = '".$_POST["value"]."' WHERE id=".$_POST["id"];
mysqli_query($conn, $sql) or die("simple database error:". mysqli_error($conn));
?>

Example

Read Also:  Create Live Editable Table with jQuery AJAX using PHP MySQLi

I hope you have Got What is Inline Editing using PHP MySQL and jQuery Ajax And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PayPal Subscriptions(recurring payments) Payment Gateway Integration in PHP Source Code Download
  2. Read Also:  Add Edit Delete Table Row Example using JQuery
  3. Read Also:  Session Management Using Yii Framework
  4. Read Also:  Uninstalling xampp Linux Ubuntu using terminal command
  5. Read Also:  Pure CSS Add active class to hover effects
  6. Read Also:  Add and Delete rows Dynamically using jQuery
  7. Read Also:  how to delete (splice) an element from nested JSON using Vuejs
  8. Read Also:  Calculate get Time difference between two dates using PHP
  9. Read Also:  Laravel force https with url helper
  10. Read Also:  jQuery Accordion Vertical Menu using CSS