I have a update form which updates SQL tables.
The form is working fine, issue is with the HTML portion. When clicking on the table cell a pop up box appears, but for some reason a new column is being added causing the HTML to break down.
I have tried making changes in the JS but no luck so far. Anyone can tell what is wrong here?
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>Update Form</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">Name</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">Description</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Status</th>
</tr>
</thead>
<tbody>
<?php
$sql = "EXEC dbo.sp_GOMDailyProd @Action = 'Read'";
$query = sqlsrv_query($connect, $sql);
$i=0;
while($fetch = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['MerrickID'].'" key="name">'.$fetch['OilProd'].'</td>
<td class="xedit" id="'.$fetch['MerrickID'].'" key="details">'.$fetch['OilProd'].'</td>
<td class="xedit" id="'.$fetch['MerrickID'].'" key="status">'.$fetch['OilProd'].'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
