Update content in HTML table using PHP and AJAX - php

I am trying to update the contents of the table by pressing the update button in PHP using the MySQL connection. I want to combine Ajax and PHP, because by using that I don't have to refresh the page every time.
I don't have any idea to do this. And I haven't found anything on the internet. So I came here to ask.
Here you see a picture of how my current page looks like.
My table
The code I use to generate/populate the table:
<div class="col-md-12">
<h3 class="title">Active Tasks</h3>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Task</th>
<th>Predecessor</th>
<th>Dev</th>
<th>MOSCOW</th>
<th>Plan</th>
<th>Do</th>
<th>Check</th>
<th>Act</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$query = mysqli_query($conn, $SQL);
while ($row = mysqli_fetch_array($query)) {?>
<tr class="active">
<td style="display:none;><?php echo $row['ID'];?></td>
<td style="display:none;"><?php echo $row['ProjectID'];?></td>
<td><?php echo $row['Task'];?></td>
<td><?php echo $row['Predecessor'];?></td>
<td><?php echo $row['Dev'];?></td>
<td><?php echo $row['MOSCOW'];?></td>
<td class="js-Task-Plan"><?php echo $row['Plan'];?></td>
<td class="js-Task-Do"><?php echo $row['Do'];?></td>
<td><?php echo $row['Check'];?></td>
<td><?php echo $row['Act'];?></td>
<td>
<button type="button" class="js-TimerStart btn btn btn-default">Start</button>
<button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button>
<button type="button" class="js-TimerResume btn btn-default">Resume</button>
<a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a>
<a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<button class="btn btn-block btn-default btn-success" name="UpdateTable"><span style="font-weight: bold;">Update</span></button>
</div>
Thank you for every bit of response and information.

Its not too big issue.
You have to just give some class and ids to your table row and tds.
first of all give unique ids to all rows, in your case you have
<?php echo $row['ID'];? and give same class to all rows these will use later steps.
and give data-id to each row with unique id...so
every tr may be named with <tr id='tr_<?php echo $row['ID'];?>' class='projects' data-id='<?php echo $row['ID'];?>'> and Predecessor td witl be <td id='p_<?php echo $row['ID'];?>'></td>
now i am asssuming that you want to update each project Predecessor every 3 seconds..then just you need to write ajax call for updation.
setInterval(function(){
$('.project').each(function(){
var id=$(this).data('id');
$.ajax({
url:'php_file _name_that_takes_project_id_and_get_details_from_database',
data:{id:id},
type:'POST',
sucess:function(data){
// here data is returned value by ajax php file call which takes project id and fetch Predecessor related to this id.
$('#p_'+id).html(data);
}
});
});
, 3000);

Put it in separate script:
<?php
$query = mysqli_query($conn, $SQL);
while ($row = mysqli_fetch_array($query)) {?>
<tr class="active">
<td style="display:none;><?php echo $row['ID'];?></td>
<td style="display:none;"><?php echo $row['ProjectID'];?></td>
<td><?php echo $row['Task'];?></td>
<td><?php echo $row['Predecessor'];?></td>
<td><?php echo $row['Dev'];?></td>
<td><?php echo $row['MOSCOW'];?></td>
<td class="js-Task-Plan"><?php echo $row['Plan'];?></td>
<td class="js-Task-Do"><?php echo $row['Do'];?></td>
<td><?php echo $row['Check'];?></td>
<td><?php echo $row['Act'];?></td>
<td>
<button type="button" class="js-TimerStart btn btn btn-default">Start</button>
<button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button>
<button type="button" class="js-TimerResume btn btn-default">Resume</button>
<a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a>
<a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a>
</td>
</tr>
<?php } ?>
and call it 'table.php'.
and add js code, which will be make AJAX call to table.php and update our table
$.ajax('table.php', {
success: function(data) {
$('.table-bordered.table-condensed tbidy').html($(data));
$('#notification-bar').text('The page has been successfully loaded');
},
error: function() {
$('#notification-bar').text('An error occurred');
}
});

Related

Ajax table doesn't show anything

I'm creating a table using ajax and php but there's one problem, the table isn't showing in my div. I'm really new to ajax so I don't really fully understand it yet.
Here's my div:
<div class="body" id="live-data">
</div>
Here's the ajax code:
$(document).ready( function() {
function fetch_data() {
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
});
And here's fetch.php:
<?php
include('../global/db.php');
$output = '';
$sql ="SELECT * FROM students WHERE status = '0' AND stud_grade = '$level_id' ORDER BY date_enrolled DESC";
$result = mysqli_query($db, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th width="135" class="noExport">Action</th>
<th width="90">LRN</th>
<th width="20">Level</th>
<th>Name</th>
<th width="20">Gender</th>
<th width="60">Type</th>
<th width="105" style="font-size: 14px!important;">Date Enrolled</th>
</tr>
</thead>
<tbody>';
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
';
}
}
else {
$output .= '
<tr>
<td colspan="12">Data not Found</td>
</tr>';
}
$output .= '
</tbody>
</table>
</div>';
echo $output;
?>
It would great if anyone could help because I just don't know why it doesn't work
Edit:
I've changed the code so it returns the data in the console tab and here's what shows up:
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th width="135" class="noExport">Action</th>
<th width="90">LRN</th>
<th width="20">Level</th>
<th>Name</th>
<th width="20">Gender</th>
<th width="60">Type</th>
<th width="105" style="font-size: 14px!important;">Date Enrolled</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
<tr>
<td>
<button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?>">
<i class="material-icons">search</i>
<span>Profile</span>
</button>
<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $stud_id ?><?php echo $stud_id ?>">
<i class="material-icons">person</i>
<span>Parent</span>
</button>
</td>
<td><?php echo $stud_lrn ?></td>
<td><?php echo $stud_grade ?></td>
<td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
<td><?php echo $stud_gender ?></td>
<td><?php echo $stud_type ?></td>
<td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
</tr>
</tbody>
</table>
</div>
So it clearly returns the correct data but it just doesn't show up in the live-data div
Maybe take a look in your html where is your div. Your div id says "live-data" and in the ajax code you mentioned to fetch data for div id "#live_data" instead of "#live-data".
Maybe changing them for same name can solve your problem. I would use for thr div id and in the ajax same id names like "#liveData".
Example (same code, just edited to the right IDs, compare with your original):
Your HTML div
<div class="body" id="liveData">
</div>
Your ajax code
$(document).ready( function() {
function fetch_data() {
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#liveData').html(data);
}
});
}
fetch_data();
});
Just append the correct Id of the div tag in sucess function

Edit users in database using sql

I'm trying to generate a table of all user accounts and then have buttons next to each user to either delete or change the account level of the user (admin or not admin). What would be the best way to go about this?
Here's my code:
<?php
$query = mysql_query("SELECT user_name,user_id,user_email,user_level
FROM users
ORDER BY user_name ASC");
echo '<table class="table table-hover">
<thead class="thead-default">
<tr>
<th>Username</th>
<th>User ID</th>
<th>Email</th>
<th>Level</th>
<th>Options</th>
</tr>
</thead>';
while($row = mysql_fetch_array($query)){
echo '<tbody>
<tr>
<td class="col-3">' .$row['user_name'].'</td>
<td class="col-3">' .$row['user_id'].'</td>
<td class="col-3">' .$row['user_email'].'</td>
<td class="col-3">' .$row['user_level'].'</td>
<td class="col-3"><a class="btn btn-success" href="#" data-toggle="tooltip" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn btn-success" href="#" data-toggle="tooltip" title="Promote"><span class="glyphicon glyphicon-arrow-up"></span></a>
<a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-arrow-down" data-toggle="tooltip" title="Demote"></span></a>
<a class="btn btn-danger" href="delete.php" data-toggle="tooltip" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>';
}
echo '</table>'; ?>
Any help would be appreciated :)
Edit: The admin/standard user is set via user_level with 0 being standard user and 1 being admin
edit 2: Added code
<?php
include 'connect.php';
include 'header.php';
mysql_query("UPDATE users SET user_level='1' WHERE user_id='".$_GET['user_id']."'");
die("User promoted to admin.");
include 'footer.php';
?>
Getting no luck with it, will try to add if statements for feedback on if database row changes
This here is example of code, because your questions lack some details, so i am sharing my code.
<table>
<tr>
<th>User Email </th>
<th>Date & Time </th>
<th>Complain Number</th>
<th>Complain Type</th>
<th>Description</th>
<th>Status</th>
</tr>
<?php
$ccount =1;
$email= $_SESSION["email"];
$query = mysqli_query($con,"Select * from new_complain where new_email =
'$email'");
while($rows = $query->fetch_assoc())
{
?>
<tr>
<input type="hidden" name="<?php echo 'sstd' . $ccount ; ?>" value="<?php
echo $rows['complain_type']; ?>" placeholder="Student Name" />
<td><?php echo $_SESSION["email"]; ?></td>
<td><?php echo $rows['complain_date']; ?></td>
<td><?php echo $rows['new_id']; ?></td>
<td><?php echo $rows['complain_type']; ?></td>
<td><?php echo $rows['new_complain']; ?></td>
<td><?php echo $rows['comlain_status']; ?></td>
</tr>
<?php
$ccount++;
} ?>
</table>
Without full details, it would be something like this:
<a class="btn btn-success" href="promote.php?id='.$row['user_id'].'" data-toggle="tooltip" title="Promote"><span class="glyphicon glyphicon-arrow-up"></span></a>
<a class="btn btn-danger" href="demote.php?id='.$row['user_id'].'"><span class="glyphicon glyphicon-arrow-down" data-toggle="tooltip" title="Demote"></span></a>
Then you need a promote.php in the same directory as this file, which would look like this:
<?php
mysql_query("UPDATE users SET user_level='1' WHERE user_id='".$_GET['user_id']."'");
die("User promoted to admin user.");
And a demote.php like so:
<?php
mysql_query("UPDATE users SET user_level='0' WHERE user_id='".$_GET['user_id']."'");
die("User demoted to standard user.");

Passing one of the <td> value to controller when clicking a button

I have a table like this:
When I click the Delete! button, I want to pass the role ID to the controller.
After looking for a lot of cases in stackoverflow. I've just succeeded to retrieve the role ID using JS.
Code like this:
$(".deleteButton").click(function() {
var $row = $(this).closest("tr");
var $text = $row.find("td:first-child").text();
// Let's test it out
alert($text);
});
But the problem is, I don't how to pass it back to the button, so then the button can pass it to the controller.
Is there any simple way to pass it to the controller? Maybe without retrieving the role ID first, and when click the button the value passed and the controller called at once?
This is my code:
<table class="table" id="myTable">
<thead class="text-primary">
<th class="col-md-1">ID Role</th>
<th class="col-md-3">Role</th>
<th class="col-md-3">Jumlah Member</th>
<th></th>
</thead>
<tbody>
<?php
foreach($result as $row) { ?>
<tr>
<td><?php echo $row->id_role ?></td>
<td><?php echo $row->role ?></td>
<td><?php echo $row->jumlah ?></td>
<td>
<button type="button" class="btn btn-success btn-sm editButton">Edit!</button>
<button type="button" class="btn btn-danger btn-sm deleteButton">Delete!</button>
</td>
</tr>
<?php
} ?>
</tbody>
</table>
Do you have to use JavaScript? If not, this is a simple task for a form
<form action="path/to/your/controller" method="post">
<table class="table" id="myTable">
<!-- thead, etc -->
<tbody>
foreach($result as $row) : ?>
<tr>
<td><?= $row->id_role ?></td>
<td><?= $row->role ?></td>
<td><?= $row->jumlah ?></td>
<td>
<button type="submit" name="edit" value="<?= htmlspecialchars($role->id_role) ?>"
class="btn btn-success btn-sm editButton">Edit!</button>
<button type="submit" name="delete" value="<?= htmlspecialchars($role->id_role) ?>"
class="btn btn-danger btn-sm deleteButton">Delete!</button>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</form>
Your controller would then receive either $_POST['edit'] or $_POST['delete'] with the role ID as the value.
If you're interested in securing your form from possible cross-site-request-forgery attacks, CodeIgniter has a built-in solution.
Otherwise, I would just add the id_role property to the button, eg
<button type="button" class="btn btn-danger btn-sm deleteButton" value="<?= htmlspecialchars($role->id_role) ?>">Delete!</button>
and in your JS
$('.deleteButton').on('click', function(e) {
var roleId = this.value
$.ajax({
url: '/roles/' + roleId, // assuming a REST API
method: 'DELETE'
}).done(function() {
alert('Deleted role ' + roleId);
})
})
You assign the role id to another <td> which is a little bit longer to get the id by jQuery. You easily get the click button id just give to an id like.
<button type="button" id="<?php echo $row->id_role ?>" class="btn btn-danger btn-sm deleteButton">Delete!</button>
and then you can easily get the specific row id
$(".deleteButton").click(function() {
var $text= $(this).attr("id");
alert($text);
});
and then you can send that id to controller by ajax.

Need to add a delete button to a html table to remove record from the database with a message

<table class="table admin-table list-table nurserytwo-table">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Code</td>
<td>Active</td>
<td>Edit</td>
</tr>
</thead>
<tbody>
<?php foreach($nurseries->result() as $nursery) { ?>
<tr>
<td><?php echo $nursery->id; ?></td>
<td><?php echo $nursery->name; ?></td>
<td><?php echo $nursery->code; ?></td>
<td><?php echo set_bool($nursery->active); ?></td>
<td><span class="glyphicon glyphicon-edit"></span> <?php echo
anchor('admin/nurseries/edit_nursery/'.$nursery->id, 'Edit', 'class="edit-
link"'); ?></td>
</tr>
<?php } ?>
</tbody>
</table>
This is my current table code and I have had a good look around to see if I can work out how to do this but I am really new to php and can't seem to get my head around it. I need to add a delete button after the edit one and I know I could do this via a delete.php but no idea where to start. Any help would be much appreciated.
UPDATED:
This is what I have currently:
}elseif( $action == "delete_nursery_course" ){
if($id) {
$q = $this->db->where('id', $id)->delete('nursery_courses');
if($this->db->affected_rows() > 0) {
if($this->input->is_ajax_request()) {
$this->output->enable_profiler(FALSE);
echo "SUCCESS"; die();
}else{
set_flash_message('Nursery deleted successfully.',
'success');
}
}else{
if($this->input->is_ajax_request()) {
$this->output->enable_profiler(FALSE);
echo "Something went wrong. Please try again."; die();
}else{
set_flash_message('Something went wrong. Please try
again.', 'error');
}
}
And here is the html:
<table class="table admin-table list-table nurseryone-table">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Colour</td>
<td>Active</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
<?php foreach($nursery_courses->result() as $nursery_course) { ?>
<tr>
<td><?php echo $nursery_course->id; ?></td>
<td><?php echo $nursery_course->name; ?></td>
<td><div style="background:<?php echo $nursery_course->colour; ?>"
class="course-colour"></div></td>
<td><?php echo set_bool($nursery_course->active); ?></td>
<td><span class="glyphicon glyphicon-edit"></span> <?php echo
anchor('admin/nurseries/edit_nursery_course/'.$nursery_course->id, Edit', 'class="edit-link"'); ?></td>
<td>
<span class="glyphicon glyphicon-trash"></span> <?php echo
anchor('admin/nurseries/delete_nursery_course/'.$nursery_course->id,
'delete', 'class="delete-link"'); ?></td>
</tr>
<?php } ?>
</tbody>
</table>
You could use only html and javascript with jquery to use ajax requests to make an edit and delete button.
HTML:
<td class="text-right">
<a class="edit btn btn-sm btn-default" href="javascript:;">
<i class="icon-note"></i>
</a>
<a class="delete btn btn-sm btn-danger" href="javascript:;">
<i class="icons-office-52"></i>
</a>
</td>
And in your javascript file you have to define the onclick events for this a buttons.
Here's a Plunker example with html and javascript code:
Editable Table
Also you could use jquery DataTables to make it easier and better.
Hope its help you.

Data not loaded by the ajax and data modal

im trying to loaded the vehicle details using ajax and data modal dialog. but seem that the data does not loaded correctly and i cant seem to figured out what is wrong with codes.
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
data modal dialog used to display the details.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Vehicles Details</h4>
</div>
<div class="modal-body" id="vehicle_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the select.php that i used
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms");
$query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'";
$result = mysqli_query($link, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Plate No</label></td>
<td width="70%">'.$row["plateNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Number</label></td>
<td width="70%">'.$row["engineNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Capacity</label></td>
<td width="70%">'.$row["engineCapacity_vehicle"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
script used
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("id_vehicle");
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Have a look at your select.php file:
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms"); <========
TYPO. It should've been:
$link=mysqli_connect("localhost","root","root","vms");
Also,
Add a data-vehicleid attribute to your view_data button:
<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td>
And then change your script to receive that attribute value:
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("data-vehicleid"); <=====
$.ajax({
....
});
});
});
</script>
Right now, you've set it to :
var vehicle_id = $(this).attr("id_vehicle");
which won't work as you don't have an attribute called id_vehicle="..." on that button. I'm guessing you meant attr("id");
Add this code on your while loop
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" data-vehicle-id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
And in script change your id var vehicle_id = $(this).attr("data-vehicle-id");
Hope this code work
in order to get the id of this this you need to add onclick
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" onclick="getId(this.id)"/></td>
function getId(clicked_id){
var vehicle_id = clicked_id;
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
}
Here is updated code for view:
view:
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td>more</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
Script:
<script>
$('#dataModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var vehicle_id = button.data('vehicle_id')
var modal = $(this)
$.ajax({
url:"select.php",
method:"POST",
data:{vehicle_id:vehicle_id},
success:function(data){
modal.find('.modal-body').html('No Response');
modal.find('.modal-body').html(data);
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
</script>

Categories