How to edit data table without refreshing page by using jQuery ajax and php ~ RikReay

Translate

Wednesday, February 26, 2014

How to edit data table without refreshing page by using jQuery ajax and php

9:49 PM

Anonymous

In this topic’s purpose just show you about how to edit data table without refreshing page. It is easy way if you want to edit your data ,although back end or front end. Normally if you want to edit your data you must open new page to edit, but now you just edit on your site. For example i want to edit Username. To know clear about how to use it you can see any step below:
Good article by +John Biundo and +Eric Enge at +Stone Temple Consulting , thanks guys. Add a comment... http://www.stonetemple.com/articles/css-and-seo.shtml David England 10:16 AM Good article by +John Biundo and +Eric Enge at +Stone Temple Consulting , thanks guys. Add a comment...

Step 1: You need to create database table to store the user name. For example create database table name “fullnames”. This is the keys to create database table and one more create by using interface.

1</pre>

2CREATE TABLE IF NOT EXISTS `fullnames` (

3`id` int(11) NOT NULL AUTO_INCREMENT,

4`firstname` varchar(70) DEFAULT NULL,

5`lastname` varchar(70) DEFAULT NULL,

6PRIMARY KEY (`id`))

7<pre>

Step 2: Create file name “index.php” to store data

<body bgcolor="#dedede">
<div style="margin:0 auto; width:750px; padding:10px; background-color:#fff; height:800px;"> 
<h1>Edit Data Tableh1>
<table width="100%">
<tr class="head">
<th>First Nameth><th>Last Nameth>
tr>
<!--?php 
$sql=mysql_query("select * from fullnames");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];//select on row what you want to edit//
$firstname=$row['firstname'];
$lastname=$row['lastname'];
if($i%2)
{
?>
<tr id="<!--?php echo $id; ?>" class="edit_tr"> 
<!--?php } else { ?>
<tr id="<!--?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">

<td width="50%" class="edit_td">
<span id="first_<!--?php echo $id; ?>" class="text"><!--?php echo $firstname; ?>span> 
<input type="text" value="<!--?php echo $firstname; ?>" class="editbox" id="first_input_<!--?php echo $id; ?>" />
td>
<td width="50%" class="edit_td">
<span id="last_<!--?php echo $id; ?>" class="text"><!--?php echo $lastname; ?>span> 
<input type="text" value="<!--?php echo $lastname; ?>" class="editbox" id="last_input_<!--?php echo $id; ?>"/>
td>
tr>
<!--?php 
$i++;
}
?>
table>
div>
body>

Step3: Create a file name “db.php” to connect to store database to store data username and then include it into “index.php” file:

Step4: Use jQuery Ajax and PHP:

<!--?php 
include('db.php'); // include file db.php to connect ot database//
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Edit Table Datatitle>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();<!-- it will hide id first name -->
$("#last_"+ID).hide();<!-- it will hide id last name -->
$("#first_input_"+ID).show();<!-- it will show id firstname -->
$("#last_input_"+ID).show();<!-- it will show id lastname -->
}).change(function()<!-- it will change data -->
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();<!-- it will get data when you change -->
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html(''); <!-- if process slow it will show image load.gif -->

if(first.length && last.length>0) <!-- use ajax because it doesn't refresh page -->
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});
$(".editbox").mouseup(function() 
{
return false
});
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});

Step5: To add more style sheet :

<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
style>

Step 6: To update data that you have been changed we use php code to update it.Create file name “table_edit_ajax.php”:

<pre style=”background:#fff;color:#3b3b3b”><?php
include(”db.php”);// include db.php to connect to database//
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = ”update fullnames set firstname=’$firstname’,lastname=’$lastname’ where id=’$id’”;
mysql_query($sql);
}
?>
</pre>
This is the result demo of this topic:

FireShot Pro Screen Capture #022 - 'Edit Table Data' - localhost_Live_table_edit_tableedit_php

Posted in program

RikReay

Translate

Wednesday, February 26, 2014

How to edit data table without refreshing page by using jQuery ajax and php

0 comments:

Post a Comment

image

Blogroll

Categories

Popular Posts