Update via AJAX

  • Autor de la entrada:
  • Categoría de la entrada:PHP

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Actualizar Por AJAX</title>

<!– Bootstrap –>
<link href=»css/bootstrap.min.css» rel=»stylesheet»>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=»https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js»></script>
<script src=»https://oss.maxcdn.com/respond/1.4.2/respond.min.js»></script>
<![endif]–>
</head>
<body onload=»viewdata()»>
<p><br/></p>
<div class=»container»>
<div id=»viewdata»></div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=»js/jquery-2.1.3.js»></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=»js/bootstrap.min.js»></script>
<!– jQuery Ajax –>
<script type=»text/javascript»>
function viewdata(){
$.ajax({
type: «GET»,
url: «getdata.php»,
dataType: «html»
}).done(function( msg ) {
$( «#viewdata» ).html( msg );
}).fail(function( jqXHR, textStatus ) {
alert( «Request failed: » + textStatus );
});
}
function updatedata(str){
var id = str;
var fn = $(‘#fn’+str).val();
var ln = $(‘#ln’+str).val();
var age = $(‘#age’+str).val();
var ht = $(‘#ht’+str).val();
var job = $(‘#job’+str).val();

var datas = «id=»+id+»&fn=»+fn+»&ln=»+ln+»&age=»+age+»&ht=»+ht+»&job=»+job;

$.ajax({
type: «POST»,
url: «updatedata.php»,
data: datas,
dataType: «html»
}).done(function( msg ) {
alert( msg );
viewdata();
}).fail(function() {
alert( «error» );
}).always(function() {
alert( «finished» );
$(«.modal-backdrop»).hide();
});
}
</script>

</body>
</html>

////////////////////////////////////////////////////////////////////////////getdata.php
<table class=»table table-condensed table-bordered table-hover table-striped»>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
<th>Action</th>
</tr>
<?php
$servername = «localhost»;
$username = «root»;
$password = «»;
$dbname = «biodata»;

// Create connection
$mysqli = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($mysqli->connect_error) {
die(«Connection failed: » . $mysqli->connect_error);
}

$res = $mysqli->query(«SELECT * FROM person»);
while($row = $res->fetch_assoc()):
?>
<tr>
<td><?php echo $row[‘id_person’]; ?></td>
<td><?php echo $row[‘firstname’]; ?></td>
<td><?php echo $row[‘lastname’]; ?></td>
<td><?php echo $row[‘age’]; ?></td>
<td><?php echo $row[‘hometown’]; ?></td>
<td><?php echo $row[‘job’]; ?></td>
<td><a style=»text-decoration:none;cursor:pointer;color:#aa5500;» data-toggle=»modal» data-target=»#addData-<?php echo $row[‘id_person’]; ?>»><span class=»glyphicon glyphicon-pencil» aria-hidden=»true»></span> Edit</a> </td>
</tr>
<!– Modal –>
<div class=»modal fade» id=»addData-<?php echo $row[‘id_person’]; ?>» tabindex=»-<?php echo $row[‘id_person’]; ?>» role=»dialog» aria-labelledby=»myModalLabel-<?php echo $row[‘id_person’]; ?>» aria-hidden=»true»>
<div class=»modal-dialog»>
<div class=»modal-content»>
<form>
<div class=»modal-header»>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»><span aria-hidden=»true»>&times;</span></button>
<h4 class=»modal-title» id=»myModalLabel-<?php echo $row[‘id_person’]; ?>»>Update Data</h4>
</div>
<div class=»modal-body»>
<input type=»hidden» id=»id» value=»<?php echo $row[‘id_person’]; ?>»>
<div class=»form-group»>
<label for=»fn»>First Name</label>
<input type=»text» class=»form-control» id=»fn<?php echo $row[‘id_person’]; ?>» value=»<?php echo $row[‘firstname’]; ?>»>
</div>
<div class=»form-group»>
<label for=»ln»>Last Name</label>
<input type=»text» class=»form-control» id=»ln<?php echo $row[‘id_person’]; ?>» value=»<?php echo $row[‘lastname’]; ?>»>
</div>
<div class=»form-group»>
<label for=»age»>Age</label>
<input type=»text» class=»form-control» id=»age<?php echo $row[‘id_person’]; ?>» value=»<?php echo $row[‘age’]; ?>»>
</div>
<div class=»form-group»>
<label for=»ht»>Hometown</label>
<input type=»text» class=»form-control» id=»ht<?php echo $row[‘id_person’]; ?>» value=»<?php echo $row[‘hometown’]; ?>»>
</div>
<div class=»form-group»>
<label for=»job»>Job</label>
<input type=»text» class=»form-control» id=»job<?php echo $row[‘id_person’]; ?>» value=»<?php echo $row[‘job’]; ?>»>
</div>
</div>
<div class=»modal-footer»>
<button type=»button» class=»btn btn-default» data-dismiss=»modal»>Close</button>
<button type=»button» onclick=»updatedata(‘<?php echo $row[‘id_person’]; ?>’)» class=»btn btn-primary»>Save changes</button>
</div>
</form>
</div>
</div>
</div>
<?php
endwhile;
?>
</table>
//////////////////////////////////////////////////////////config.php
<?php
$mysqli = new mysqli(«localhost», «root», «», «person»);
if ($mysqli->connect_errno) {
echo «Failed to connect to MySQL: » . $mysqli->connect_error;
}
?>

//////////////////////////////////////////////////////updatedata.php
<?php
$servername = «localhost»;
$username = «root»;
$password = «»;
$dbname = «biodata»;

// Create connection
$mysqli = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($mysqli->connect_error) {
die(«Connection failed: » . $mysqli->connect_error);
}

$id = $_POST[‘id’];
$fn = $_POST[‘fn’];
$ln = $_POST[‘ln’];
$age = $_POST[‘age’];
$ht = $_POST[‘ht’];
$job = $_POST[‘job’];
if(isset($fn) && isset($ln) && isset($age) && isset($ht) && isset($job)){
$res2 = $mysqli->query(«update person set firstname=’$fn’, lastname=’$ln’, age=’$age’, hometown=’$ht’, job=’$job’ where id_person=’$id'»);
if($res2){
echo «Success Update Data»;
} else{
echo «Fail Update Data»;
}
} else{
echo «Error Update Data»;
}
?>