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.

Following files needed for this inline edit example

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

External Libs. Add



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


manager Name man_salary Age
" onBlur="datasaveInlineEdit(this,'man_name','')" onClick="highlightEdit(this);"> " onBlur="datasaveInlineEdit(this,'man_salary','')" onClick="highlightEdit(this);"> " onBlur="datasaveInlineEdit(this,'man_age','')" onClick="highlightEdit(this);">

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


Example

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.

Leave a Comment