My problem is when I inserted or updated a value, this code is not working but the status code in my network shows 200 means its OK
I want to fetch any data inside tbody section, where I fetch all of my data
This is my entire code
This is my HTML code where my table goes here after the page reload
<!-- Table starts -->
<div class="container-fluid">
<table class="table table-hover table-responsive">
<thead class="table-head">
<tr>
<th>Action</th>
<th>ID</th>
<th>Username</th>
<th>Password</th>
<th>Birthday</th>
<th>Age</th>
<th>Mobile #</th>
<th>Address</th>
<th>Gender</th>
<th>Nickname</th>
<th>Occupation</th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</div>
<!-- Table ends -->
This is my code inside my script I am using jquery ajax to perform it.
//view existing data
function viewData(){
$.ajax({
method: 'POST',
url: 'server.php',
dataType: 'text',
data: {
key: 'viewData',
},
success: function(response){
//this is my problem
$('.tbody').append(response);
//After I changed the append to html it works OMG!
//just like this
$('.tbody').html(response);
$(".table").DataTable();
}
});
}
//Insert data
function manageData(key){
var username = $('#username');
var password = $('#password');
var birthday = $('#birthday');
var age = $('#age');
var mobileNumber = $('#mobile-number');
var fullAddress = $('#full-address');
var gender = $('#gender');
var nickname = $('#nickname');
var occupation = $('#occupation');
var editRowID = $('#editRowID');
var query = window.location.search;
if(isNotEmpty(username) && isNotEmpty(password) && isNotEmpty(birthday)
&& isNotEmpty(age) && isNotEmpty(mobileNumber) && isNotEmpty(fullAddress)
&& isNotEmpty(gender) && isNotEmpty(nickname) && isNotEmpty(occupation)){
$.ajax({
method: 'POST',
url: query + '/Dental-Clinic/admin/server.php',
dataType: 'text',
data: {
key: key,
username: username.val(),
password: password.val(),
birthday: birthday.val(),
age: age.val(),
mobileNumber: mobileNumber.val(),
fullAddress: fullAddress.val(),
gender: gender.val(),
nickname: nickname.val(),
occupation: occupation.val(),
rowID: editRowID.val()
},
success: function(response){
username.val(""),
password.val(""),
birthday.val(""),
age.val(""),
mobileNumber.val(""),
fullAddress.val(""),
gender.val(""),
nickname.val(""),
occupation.val(""),
$(".modal").modal('hide');
viewData();
}
});
}
}
And this is my server.php
//view/refresh data when new record has been saved
if(isset($_POST['key'])){
if($_POST['key'] == 'viewData'){
$query = "SELECT * FROM patient_table";
$result = $connection->query($query);
if ($result->num_rows > 0){
$response = '';
// output data of each row
while($row = $result->fetch_array()) {
$response .='
<tr>
<td class="d-flex justify-content-between"> <!--To align the button-->
<button class="btn btn-primary" onclick="edit('.$row["id"].')" id="edit" value="Edit"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger" id="delete"><i class="fas fa-trash-alt"></i></button>
</td>
<td>'.$row["id"].'</td>
<td>'.$row["username"].'</td>
<td>'.$row["password"].'</td>
<td>'.$row["birthday"].'</td>
<td>'.$row["age"].'</td>
<td>'.$row["mobile_number"].'</td>
<td>'.$row["full_address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["nickname"].'</td>
<td>'.$row["occupation"].'</td>
</tr>
';
}
echo($response);
} else
exit('no data');
}
}
//Insert data
$username = $connection->real_escape_string($_POST['username']);
$password = $connection->real_escape_string($_POST['password']);
$birthday = $connection->real_escape_string($_POST['birthday']);
$age = $connection->real_escape_string($_POST['age']);
$mobileNumber = $connection->real_escape_string($_POST['mobileNumber']);
$fullAddress = $connection->real_escape_string($_POST['fullAddress']);
$gender = $connection->real_escape_string($_POST['gender']);
$nickname = $connection->real_escape_string($_POST['nickname']);
$occupation = $connection->real_escape_string($_POST['occupation']);
$rowID = $connection->real_escape_string($_POST['rowID']);
//add new data when manageData('addNew'); btn is clicked
if($_POST['key'] == 'addNew'){
$query = "INSERT INTO patient_table (username, password, birthday, age, mobile_number, full_address, gender, nickname, occupation) VALUES ('$username', '$password', '$birthday', '$age', '$mobileNumber', '$fullAddress', '$gender', '$nickname', '$occupation')";
$result = $connection->query($query);
if ($result) {
echo '<script>alert("Successfully Inserted");</script>';
} else {
echo "Error: " . $query . "<br>" . $connection->error;
exit("Error connecting to the database");
}
}
2
Answers
Here i am Suppose that like this you have an insert code:-
HTML Code:-
jQuery Ajax Code:-
HTML
JS
server.php