DEVELOPMENT

Inline editting, already you must be aware about...whole process in one page...i.e, no need to navigate to different page(or form) on any transaction...thanks to jquery...necessary to keep secure approach...however, no discussion about the security here.

inline edit


index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" ><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

window.c=0;

$("#recdisp").load("rec.php");

$(document).on("blur", ".edi", function(){

$.post("edit.php",
{
id: $(this).attr('id'),
text: $(this).html(),
},
function(data, status){

});

});

$(document).on("click", ".del", function(){
$.post("edit.php",
{
id: $(this).attr('id'),
text: $(this).html(),
},
function(data, status){
$("#recdisp").load("rec.php");
$("#btn1").html("Add a row");
});
});

$(document).on("click", "#btn1", function(){
if(c==1)
{ $(this).html("Add a row");
$.post("edit.php",
{
id : "add_new",
val: $("input").serialize(),

},
function(data, status){
c=0; 
$("#recdisp").load("rec.php");
}); 
}
else
{ 
c=1; 
$("<input type='text'>").attr("name", "0").appendTo("#recdisp");
$("<input type='text'>").attr("name", "1").appendTo("#recdisp");
$("<input type='text'>").attr("name", "2").appendTo("#recdisp");
$(this).html("Save");
} 
});
});
</script>
</head>
<body>
<div id="recdisp"></div>
<button id="btn1">Add a row</button>
</body>
</html>
THE TABLE(in_edit)

a simple table with column empno,fname,lname.

inline edit db


rec.php
<?php
$conn=mysql_connect("localhost","root","") or die("could not connect to database");
$db=mysql_select_db("blog",$conn) or die("could not select database");
$query="SELECT * FROM in_edit";
$result=mysql_query($query);
echo " <table >";

while ($row = mysql_fetch_array($result)) {

$ie=$row["empno"]."_empno";
$if=$row["empno"]."_fname";
$il=$row["empno"]."_lname";
$del=$row["empno"]."_del";

echo "<tr id=\"ok\"><td class=\"edi\" id=\"$ie\" contenteditable=\"true\">$row[empno]</td>"."<td class=\"edi\" id=\"$if\" contenteditable=\"true\">$row[fname]</td>"."<td class=\"edi\" id=\"$il\" contenteditable=\"true\">$row[lname]</td><td class=\"del\" id=\"$del\">Delete</td></tr>"; 

}
echo "</table>";
mysql_close();
?>

edit.php
<?php
$id=$_POST["id"];
$arr=explode("_",$id);
$conn=mysql_connect("localhost","root","") or die("ERROR");
$db=mysql_select_db("blog",$conn) or die("ERROR");

switch(end($arr))
{

case "new" : $val="&".$_POST["val"];
$x = preg_replace('/&(\d+)=/', '||' , $val); 
$v=explode("||",$x);
mysql_query("insert into in_edit(empno, fname, lname) values (\"$v[1]\",\"$v[2]\",\"$v[3]\")") or die("ERROR");
break;

case "del" : mysql_query("DELETE FROM `in_edit`WHERE `empno`='$arr[0]'")or die("ERROR"); 
break;
x   
default : $text=$_POST["text"];
mysql_query("UPDATE `in_edit` SET `$arr[1]`='$text' WHERE `empno`='$arr[0]'")or die("ERROR"); 
break;

}
?>                                                  
                                                   
style.css
body
{
    text-align: center;
    font:14px Arial;
}
button
{
    border:0;
    padding:15px;
    color:white;
    background: red;    
}
tr,td
{  border:2px solid black;
}
table
{    margin:40px auto;
    width : 500px;
}
.del
{
    background: red;
    color:white;
    cursor:pointer;
    border:0px;
}



Leave a Comment  
Download Code(129)





All rights reserved, the content is copyrighted to the author.

RELATED POST