Help! I can't edit the other rows on my table
here is my script.. and it's working. but only on the first row.
<script>
function showInput(e)
{
document.getElementById(e.id).type = "text";
document.getElementById(e.id).focus();
}
</script>
and here is my table. coming from my database.
<table class="table table-bordered">
<tr class="green">
<th>Job Title</th>
<th>Job Description</th>
<th colspan="2">actions</th>
</tr>
<?php foreach ($fill_data as $row): ?>enter code here
<tr>
<td>
<?php echo $row['title'];?>
<div style="position:absolute; margin-top:-20px; margin-left:4px;">
<input type="hidden" id="<?php echo $row['title'];?>" name="<?php echo $row['title'];?>" value="<?php echo $row['title'];?>">
</div>
</td>
<td><?php echo $row['description'];?></td>
<td width="40px"><img src="<?php echo base_url(); ?>images/edit1.png" width="30" height="30" title="Edit" onclick="showInput(<?php echo $row['title'];?>)" style="cursor: pointer"></td>
<td><img data-toggle="modal" data-id="<?php echo $row['id']?>" class="delete-data" href="#delete" style="margin-top: 5px; cursor:pointer" height="15" width="15" src="<?php echo base_url(); ?>images/remove.gif"></td>
</tr>
<?php endforeach?>
</table>
the $rows comes from my database.
I guess it is because
<?php endforeach?>
should be
<?php endforeach; ?>
Try to use { brackets instead, like this
foreach (something) {
//Code
}
Related
<input type="text" id="transaction_id_input" name="transaction_name">
Above is the value that I want to store in PHP variables so I can compare it in the MySQL data to display specific data. I try storing the input value also to a javascript document.getElementByID("sampleID").value then store it in a variable but it didn't also work, hoping you will help me solve this problem.
<form method="GET" id="reg" name="valid" action="<?php echo htmlspecialchars(
$_SERVER["PHP_SELF"]
); ?>">
<input type="text" id="transaction_id_input" name="transaction_name">
<div class="wrapper" >
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" id="searchmodal" placeholder="Type to search..">
<div class="icon"><i class="fas fa-search"></i></div>
</div>
</div>
<br><br>
<div class="card-header" id="cardheader2">
List of Medicine Transaction
</div><br><br>
<div class="enrollbutton2">
<a class="nav-link" id="transactioninfo_to_addtransan_class" data-toggle="modal" data-target="#myModal_transaction">Add Transaction
<span>
<lord-icon
src="https://cdn.lordicon.com/mecwbjnp.json"
trigger="loop"
colors="primary:#ffffff,secondary:#ffffff"
stroke="70"
style="width:30px;height:30px">
</lord-icon>
</span>
</a>
</div>
<div class="tableholdermodal" id="transactiontable">
<br><br><br><br>
<table>
<thead>
<tr>
<th scope="col">Transaction No.</th>
<th scope="col">Medicine Code</th>
<th scope="col">Supply</th>
<th scope="col">Lot No.</th>
<th scope="col">Expiration Date</th>
<th scope="col">Inputed Date</th>
</tr>
</thead>
<tbody id="myModalTable">
<?php
include "pdo_connection2.php";
$stm3 = $conn->query(
"SELECT * FROM tbl_transaction WHERE transaction_medicinecode = '' "
);
$rows = $stm3->fetchAll(PDO::FETCH_ASSOC);
if (count($rows) > 0) {
foreach ($rows as $row) { ?>
<tr>
<td data-label='Transaction ID' value="<?php echo $row[
"transaction_id"
]; ?>"><?php echo $row["transaction_id"]; ?></td>
<td data-label='Medicine Code' value="<?php echo $row[
"transaction_medicinecode"
]; ?>"><?php echo $row["transaction_medicinecode"]; ?></td>
<td data-label='Supply' value="<?php echo $row[
"transaction_supply"
]; ?>"><?php echo $row["transaction_supply"]; ?></td>
<td data-label='Lot No.' value="<?php echo $row[
"transaction_lotnum"
]; ?>"><?php echo $row["transaction_lotnum"]; ?></td>
<td data-label='Expiration Date' value="<?php echo $row[
"transaction_expdate"
]; ?>"><?php echo $row["transaction_expdate"]; ?></td>
<td data-label='Date Registered' value="<?php echo $row[
"transaction_date"
]; ?>"><?php echo $row["transaction_date"]; ?></td>
<td data-label='Action'>
<button type="button" class="transaction_update_class" name="transaction_update_name" data-toggle="modal" data-target="#myModalupdate_transactopn" value="<?php echo $row[
"transaction_id"
]; ?>">
<lord-icon
src="https://cdn.lordicon.com/wloilxuq.json"
trigger="loop"
colors="primary:#fb0054,secondary:#f55b2a "
stroke="70"
style="width:55px;height:55px">
</lord-icon>
</button>
<button type="button" class="transaction_delete_class" name="transaction_delete_name" data-toggle="modal" data-target="#myModaldelete_transaction" value="<?php echo $row[
"transaction_id"
]; ?>">
<lord-icon
src="https://cdn.lordicon.com/gsqxdxog.json"
trigger="loop"
colors="primary:#fb0054,secondary:#f55b2a "
stroke="70"
style="width:55px;height:55px">
</lord-icon>
</button>
</td>
</tr>
<?php }
} else {
?>
<tr><td><h4 id="h4nodatafound">------ NO DATA FOUND ------</h4></td></tr>
<?php
}
?>
</tbody>
</table>
</div>
</form>
I need to Highlight columns that have different values.
If the value on $b['nama'] and $c['nama'] is not the same i need to highlight the <tr>. I wanted the system admin to easily see which of the field is having different values so the admin can decide to approve user edit request or to reject the request.
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr>
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr>
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr>
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr>
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr>
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
Check if those two values are different and apply a class to the row
<tr<?php if ($b['nama'] != $c['nama']) { echo ' class="highlight"'; } ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
then use CSS to highlight the cells
.highlight td {
background: yellowgreen;
}
try this code
you can change the bgcolor value or you can create css class and inside of if you echo the class='my_class'
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr <?php if ($b['nama'] != $c['nama']){echo "bgcolor='#FF0000'";} ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr <?php if ($b['gelarDepan'] != $c['gelarDepan']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr <?php if ($b['gelarBelakang'] != $c['gelarBelakang']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr <?php if ($b['tempatLahir'] != $c['tempatLahir']){echo "bgcolor='#FF0000'";} ?> >
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
You can define a class named 'same' and 'different'. Then in php check if the values are same and echo the class property based on being same or different.
php
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $b['nama']; ?>
</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
In Styles
.same{
color:green;
}
.different{
color:red;
}
We have used ternary operator to figure out if the variables are same or not.
https://www.abeautifulsite.net/how-to-use-the-php-ternary-operator
Since you seem to be using Bootstrap, you could just apply an already defined style to the cells to highlight the difference. For instance:
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $b['nama']; ?>
</td>
<td class="bg-<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
By doing this, if $b['nama'] and $c['nama'] are different, the cells would have an near-red background and if they are equal, they'd have a near-green background. If you'd like to only highlight differences (in order to make the screen less overwhelming, just replace the 'bg-success' with '' so the equal cells don't get styled
I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.
I want to be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should be displaying all of the added selections in a table.
I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the index-order.php page by using ajax when pressing the button?
Index.php code:
<form name="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php">
<section id="addToOrder">
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</form>
<div id="log"></div>
Index-order.php:
<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Quantity #</th>
</tr>
<?php
foreach($_POST['rows'][0] as $row):
?>
<tr align="center">
<td><?php echo $row['loc']; ?></td>
<td><?php echo $row['rp-code']; ?></td>
<td><?php echo $row['sku']; ?></td>
<td><?php echo $row['special-id']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['quantity']; ?></td>
<td><?php echo $row['unit']; ?></td>
<td><?php echo $row['quant']; ?></td>
</tr>
<?php
endforeach;
?>
</table>
<?php endif; ?>
JavaScript:
$(function () {
$("#order").click(function() {
//reset the logger
$('#log').empty();
$('#merchTable input:checkbox:checked').each(function() {
//for each checked checkbox, iterate through its parent's siblings
var array = $(this).parent().siblings().map(function() {
return $(this).text().trim();
}).get();
console.log(array);
//to print the value of array
$('#log').append(JSON.stringify(array))
var request = $.ajax({
type: 'post',
url: 'index-order.php',
data: array,
success: function(){
alert('success');
},
error: function(){
alert('failure');
}
});
})
});
});
To pass data from one page to another using php you will have to use a session.
So in your ajax call just save your data into the session like so:
add-to-cart.php
session_start();
if (!isset($_SESSION['shopping_cart'])) {
$_SESSION['shopping_cart'] = [];
} else {
$_SESSION['shopping_cart'][] = [
'id' => $_POST['item_id'],
'amount' => $_POST['amount']
];
}
If you then click your checkout button and navigate via a page reload to your index-order.php, you could then access the data via the same session index.
session_start();
if (isset($_SESSION['shopping_cart'])) {
// display your data
} else {
echo "Your shopping cart is empty.";
}
I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.
I want to then be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should display all of the added selections in a table.
I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the page while using ajax and staying on the current page when doing so?
Index.php code:
<form name="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php">
<section id="addToOrder">
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<div id="my-div2" class="ui-widget">
<div class="ui-widget">
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</form>
Index-order.php:
<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Quantity #</th>
</tr>
<?php
foreach($_POST['rows'][0] as $row):
?>
<tr align="center">
<td><?php echo $row['loc']; ?></td>
<td><?php echo $row['rp-code']; ?></td>
<td><?php echo $row['sku']; ?></td>
<td><?php echo $row['special-id']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['quantity']; ?></td>
<td><?php echo $row['unit']; ?></td>
<td><?php echo $row['quant']; ?></td>
</tr>
<?php
endforeach;
?>
</table>
<?php endif; ?>
JavaScript (obviously needs some work. Posting what I have so far):
$(function () {
$('#form2').on('submit', function (e) {
if($('input.check').is(':checked')) {
$(this).closest('tr');
e.preventDefault();
var request = $.ajax({
type: 'post',
url: 'index-order.php',
data: $('#form2').serialize(),
success: function(){
alert('success');
},
error: function(){
alert('failure');
}
});
}
});
});
What you can do is get all the siblings of the current checked checkbox and based on that get all the columns and separate the data to finally send it via ajax.
You can do something like this:
$('#form2').on('submit', function (e) {
$checkbox = $(this).find('input.check:checked').parent('td'); //Finds the checked checkbox's column inside #form2
$otherColumns = $checkbox.nextAll(); //Gets all the siblings
});
The above code will get you all the other columns next to the checked checkbox inside your form. What you an do next is travel across $otherColumns and get each individual value using $otherColums.eq(n).html() where n is the number of the column you are trying to get.
I need help with regards to filtering my echoed table using javascript. I'm just using a as a refresher of my form. Take a look on my code below.
Here's my code for the filtering
<div align="center">
<?php
// Connect to server and select database.
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("leavecalendar") or die(mysql_error());
$i=0;
$result = mysql_query("SELECT fullname FROM employee");
$storeArray = Array();
echo '<label>Filter By Name:</label><select name="fullname" style="width: 200px">';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option >".$row['fullname']."</option>";
}
?>
</select>
<!--Filter by Date -->
<label>Filter By Date:</label>
<input class="datepicker">
click
</div>
Here's my code for the echoed table
<div style="height:70%;">
<?php
$con=mysqli_connect("localhost","root","","leavecalendar");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
?>
<table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" class="form-table">
<tr>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>
<?php
while($row = mysqli_fetch_array($sql))
{
?>
<tr>
<td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
</div>
All in all there 2 codes are under 1 form only. So below is the summary of the codes for your reference.
<form name="form1" method="post" action="deleteleave.php">
<div align="center">
<?php
// Connect to server and select database.
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("leavecalendar") or die(mysql_error());
$i=0;
$result = mysql_query("SELECT fullname FROM employee");
$storeArray = Array();
echo '<label>Filter By Name:</label><select name="fullname" style="width: 200px">';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option >".$row['fullname']."</option>";
}
?>
</select>
<!--Filter by Date -->
<label>Filter By Date:</label>
<input class="datepicker">
click
</div>
<div class="gridbody">
<div style="height:70%;">
<?php
$con=mysqli_connect("localhost","root","","leavecalendar");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
?>
<table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" class="form-table">
<tr>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>
<?php
while($row = mysqli_fetch_array($sql))
{
?>
<tr>
<td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
</div>
</div>
<input name="endorse" type="submit" id="endorse" value="Endorse Selected Leave/s">
And here's my javascript for refreshing the page. Pratically, I dont want to refresh the whole page but instead I want to refresh the form only so as to display the echoed table filtere by the dropdown or the datepicker. Hope you get my point there.
Code for refreshing the page.
<script>
$(function() {
$("#refresh").click(function() {
$("#Container").load()
})
})
</script>
Thank you for all the answers you will give. Much appreciated.
Based on your code do something like this:
Make a file echoed_table.php and put in (your code):
<div style="height:70%;">
<?php
$con=mysqli_connect("localhost","root","","leavecalendar");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
?>
<table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" class="form-table">
<tr>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
<td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>
<?php
while($row = mysqli_fetch_array($sql))
{
?>
<tr>
<td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
<td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
</div>
Than in order to load/update the table make the ajax call (maybe including additional (filter) url-parameters):
$.ajax('echoed_table.php').success(function(data) {
$('.gridbody').innerHtml(data); // better use an id to identify the container div, instead of the class here
});