so I'm trying to make a table that allows you to edit data inline as well as add, search and delete. I got the code working on my own personal server but when I uploaded it, it failed to connect to my PhpMyAdmin, I've tried watching some more videos about it but none of the data is being presented on the table which is why I believe it is a connection issue, correct me if I'm wrong, it would be great if someone could take a look at this. :)
Index.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<span id="result"></span>
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
var address = $('#address').text();
var email_address = $('#email_address').text();
var home_phone = $('#home_phone').text();
var mobile_phone = $('#mobile_phone').text();
var package_type = $('#package_type_').text();
var customer_status = $('#customer_status').text();
var mac_address = $('#mac_address').text();
var installer = $('#installer').text();
var static_ip = $('#static_ip').text();
var date_installed = $('#date').text();
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name, address:address, email_address:email_address, home_phone:home_phone, mobile_phone:mobile_phone, package_type:package_type, customer_status:customer_status, mac_address:mac_address, installer:installer, static_ip, date_installed:date_installed},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
//alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
}
});
}
$(document).on('blur', '.first_name', function(){
var id = $(this).data("id1");
var first_name = $(this).text();
edit_data(id, first_name, "first_name");
});
$(document).on('blur', '.last_name', function(){
var id = $(this).data("id2");
var last_name = $(this).text();
edit_data(id,last_name, "last_name");
});
$(document).on('blur', '.address', function(){
var id = $(this).data("id3");
var address = $(this).text();
edit_data(id,address, "address");
});
$(document).on('blur', '.email_address', function(){
var id = $(this).data("id4");
var email_address = $(this).text();
edit_data(id,email_address, "email_address");
});
$(document).on('blur', '.home_phone', function(){
var id = $(this).data("id5");
var home_phone = $(this).text();
edit_data(id,home_phone, "home_phone");
});
$(document).on('blur', '.mobile_phone', function(){
var id = $(this).data("id6");
var mobile_phone = $(this).text();
edit_data(id,mobile_phone, "mobile_phone");
});
$(document).on('blur', '.package_type', function(){
var id = $(this).data("id7");
var package_type = $(this).text();
edit_data(id,package_type, "package_type");
});
$(document).on('blur', '.customer_status', function(){
var id = $(this).data("id8");
var customer_status = $(this).text();
edit_data(id,customer_status, "customer_status");
});
$(document).on('blur', '.mac_address', function(){
var id = $(this).data("id9");
var mac_address = $(this).text();
edit_data(id,mac_address, "mac_address");
});
$(document).on('blur', '.installer', function(){
var id = $(this).data("id10");
var installer = $(this).text();
edit_data(id,installer, "installer");
});
$(document).on('blur', '.static_ip', function(){
var id = $(this).data("id5");
var static_ip = $(this).text();
edit_data(id,static_ip, "static_ip");
});
$(document).on('blur', '.date_installed', function(){
var id = $(this).data("id5");
var date_installed = $(this).text();
edit_data(id,date_installed, "date_installed");
});
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id3");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
Insert.php
<?php
$connect = mysqli_connect(");
$sql = "INSERT INTO tbl_sample(first_name, last_name, address, email_address, home_phone, mobile_phone, package_type, customer_status, mac_address, installer, static_ip, date) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."', '".$_POST["address"]."', '".$_POST["email_address"]."', '".$_POST["home_phone"]."', '".$_POST["mobile_phone"]."', '".$_POST["package_type"]."', '".$_POST["customer_status"]."', '".$_POST["mac_address"]."', '".$_POST["installer"]."', '".$_POST["static_ip"]."', '".$_POST["date"]."' )";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}
?>
select.php
<?php
$connect = mysqli_connect();
$output = '';
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">First Name</th>
<th width="30%">Last Name</th>
<th width="30%">Address</th>
<th width="40%">Email Address</th>
<th width="30%">Home Phone</th>
<th width="30%">Mobile Phone</th>
<th width="30%">Package Type</th>
<th width="30%">Customer Status</th>
<th width="30%">Mac Address</th>
<th width="30%">Installer</th>
<th width="30%">Static Ip</th>
<th width="30%">Date Installed</th>
<th width="10%">Delete</th>
</tr>';
$rows = mysqli_num_rows($result);
if($rows > 0)
{
if($rows > 10)
{
$delete_records = $rows - 10;
$delete_sql = "DELETE FROM tbl_sample LIMIT $delete_records";
mysqli_query($connect, $delete_sql);
}
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td class="address" data-id3="'.$row["id"].'" contenteditable>'.$row["address"].'</td>
<td class="email_address" data-id3="'.$row["id"].'" contenteditable>'.$row["email_address"].'</td>
<td class="home_phone" data-id3="'.$row["id"].'" contenteditable>'.$row["home_phone"].'</td>
<td class="mobile_phone" data-id3="'.$row["id"].'" contenteditable>'.$row["mobile_phone"].'</td>
<td class="package_type" data-id3="'.$row["id"].'" contenteditable>'.$row["package_type"].'</td>
<td class="customer_status" data-id3="'.$row["id"].'" contenteditable>'.$row["customer_status"].'</td>
<td class="mac_address" data-id3="'.$row["id"].'" contenteditable>'.$row["mac_address"].'</td>
<td class="installer" data-id3="'.$row["id"].'" contenteditable>'.$row["installer"].'</td>
<td class="static_ip" data-id3="'.$row["id"].'" contenteditable>'.$row["static_ip"].'</td>
<td class="date_installed" data-id3="'.$row["id"].'" contenteditable>'.$row["date_installed"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td id="address" contenteditable></td>
<td id="email_address" contenteditable></td>
<td id="home_phone" contenteditable></td>
<td id="mobile_phone" contenteditable></td>
<td id="package_type" contenteditable></td>
<td id="customer_status" contenteditable></td>
<td id="mac_address" contenteditable></td>
<td id="installer" contenteditable></td>
<td id="static_ip" contenteditable></td>
<td id="date_installed" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td id="address" contenteditable></td>
<td id="email_address" contenteditable></td>
<td id="home_phone" contenteditable></td>
<td id="mobile_phone" contenteditable></td>
<td id="package_type" contenteditable></td>
<td id="customer_status" contenteditable></td>
<td id="mac_address" contenteditable></td>
<td id="installer" contenteditable></td>
<td id="static_ip" contenteditable></td>
<td id="date_installed" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
Edit.php
<?php
$connect = mysqli_connect();
$id = $_POST["id"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE Reave SET ".$column_name."='".$text."' WHERE id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>
delete.php
<?php
$connect = mysqli_connect("");
$sql = "DELETE FROM tbl_sample WHERE id = '".$_POST["id"]."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Deleted';
}
?>
This script is supposed to allow you to add data, edit it, delete it and edit it. It's not displaying any of the data on from the database.
