I have a table like below:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key => $value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td><button type="button" name="button2" >Usuń</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
how to delete item from this list via clicking on the button in last column of the table?
my php:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
thanks for any help, I don't know how to get value by button clicking :/
It seems that your data is gotten from a file, so to get it done you need to go over all these steps in the same php script:
Get data from this file
Parse data with json_decode
Remove an item using unset($data['id'])
Save new data in the same file
Here is an example:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
// here we go
if(isset($_POST['item_key']) && !empty($_POST['item_key'])) {
$data = array_values($data);
$i=0;
foreach($data as $element) {
//check if it's the right item
if(intval($_POST['item_key']) == $element['id']){ // intval only if you are sure id passed in POST[item_key] always integer
unset($data[$i]);
}
$i++;
}
file_put_contents('data.json', json_encode(array_values($data)));
}
$_POST['item_key'] will come after submiting the form in the html, see below.
In your html code, you will need to add the following:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key =>
$value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td>
<!-- action="#" means you will stay in the same script after submit -->
<form action="#" method="POST">
<input
hidden
type="text"
name="item_key"
value="<?php echo $value['id'];?>"
/>
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
UPDATE
Used unset with array_values after json_decode
Removed header(refre..) since the refresh will be done by form submit to same script
Related
I have a table created dynamically with PHP to display requests. In each row of my table there is a button to open a popup. The ID of each request should be transferred to this popup in order to read out all data.
How can I make it so that in a dynamic table (all button names are the same) each button is differentiated, or recognized which button I pressed? And how can I pass the variable from PHP to the popup via javascript?
I would appreciate any help, I've been trying for days now, but I'm not getting any results.
Here's the table view
Popup window
<table id="meineTabelle" data-role="table" class="content"
data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<div class="tablehead">
<tr>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">1.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">2.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">3.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">4.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<tr>
<th class="">ID</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Titel</th>
<th class="">Standort</th>
<th class="">Klasse</th>
<th class="">Beginn</th>
<th class="">Abgabe</th>
<th class="">Beschreibung</th>
<th class="">Status</th>
<th class="">Erstellt</th>
</tr>
</tr>
</div>
</thead>
<tbody>
<?php
foreach ($Ausgabe as $row) {
?>
<form>
<tr onclick="dialogOeffnen('loslegen-dialog')">
<td>
<?php echo $row["ID"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Titel"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Standort"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Klasse"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Beginn"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Abgabe"] . "<br>"; ?>
</td>
<td>
<center>Link</center>
</td>
<td>
<?php echo $row["Genehmigt"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Erstellt"] . "<br>"; ?>
</td>
<td>
<input type="button" value="" onclick="">
</td>
</tr>
</form>
<?php
}
?>
</tbody>
</table>
Popup HTML
<div id="body-overlay"></div>
<div class="dialog" id="loslegen-dialog">
<a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
<i class="fas fa-times"></i>
</a>
<div class="textarea">
<h1><?php echo $row['ID'] ?></h1>
<textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" id="" cols="30" rows="10"></textarea>
</div>
<form classaction="">
<div class="txt_field">
<input type="text" name="email" value="<?= $fetch_profile['email'];?>" required>
<span></span>
<label>E-Mail</label>
</div>
<div class="txt_field">
<input type="text" name="password" required>
<span></span>
<label>Passwort</label>
</div>
<input type="submit" value="Bestätigen" name="submit">
<div class="signup_link">
</form>
</div>
<script src="dialoge.js">
</script>
<script>
</script>
</body>
</html>
</body>
</html>
dialoge.js
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
function dialogSchliessen(dialogId) {
document.getElementById(dialogId).classList.remove("sichtbar");
document.getElementById("body-overlay").classList.remove("sichtbar");
}
If I echo out $row["ID"] for sure it shows me the last ID in my table
First, let's clean up your HTML a bit. Tables have predetermined structures. That means that a only some elements can be used as a parent or child. For example, you can't nest a <tr> inside a another <tr>. Learn about the basics of tables.
<table id="meineTabelle" data-role="table" class="content" data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<tr>
<th>ID</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Titel</th>
<th>Standort</th>
<th>Klasse</th>
<th>Beginn</th>
<th>Abgabe</th>
<th>Beschreibung</th>
<th>Status</th>
<th>Erstellt</th>
</tr>
</thead>
<tbody>
<?php foreach ($Ausgabe as $row) : ?>
<tr>
<td><?= $row["ID"] ?></td>
<td><?= $row["Vorname"] ?></td>
<td><?= $row["Nachname"] ?></td>
<td><?= $row["Vorname2"] ?></td>
<td><?= $row["Nachname2"] ?></td>
<td><?= $row["Vorname3"] ?></td>
<td><?= $row["Nachname3"] ?></td>
<td><?= $row["Vorname4"] ?></td>
<td><?= $row["Nachname4"] ?></td>
<td><?= $row["Titel"] ?></td>
<td><?= $row["Standort"] ?></td>
<td><?= $row["Klasse"] ?></td>
<td><?= $row["Beginn"] ?></td>
<td><?= $row["Abgabe"] ?></td>
<td>Link</td>
<td><?= $row["Genehmigt"] ?></td>
<td><?= $row["Erstellt"] ?></td>
<td>
<button class="dialog-open" type="button" value="<?= $row["ID"] ?>">Button</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I've changed your button to a <button> element because it's a bit more flexible to use. Output the ID of the row in the value attribute. Give the button a class value to identify it with. We'll need this for JS.
Select the table in JavaScript. Listen for click events that happen within the table. The code below checks if the clicked element (event.target) is a button with the class we gave it. If it is, then we'll read the value from button and pass it to the open modal function.
const table = document.querySelector('#meinTabelle');
table.addEventListener('click', event => {
if (event.target.matches('.dialog-open') {
const dialogId = event.target.value;
dialogOeffnen(dialogId);
}
});
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
I want to hide the row when the admin click the anchor return because It's already saved in return.php so just need hide the returned status while the pending is not. Thank you for helping me
<thead>
<tr>
<th>Book title</th>
<th>Borrower</th>
<th>Type</th>
<th>Date Borrow</th>
<th>Due Date</th>
<th>Date Returned</th>
<th>Fines</th>
<th>Borrow Status</th>
</tr>
</thead>
<tbody>
<?php $user_query=mysqli_query($dbcon,"select * from borrow
LEFT JOIN member ON borrow.member_id = member.member_id
LEFT JOIN borrowdetails ON borrow.borrow_id = borrowdetails.borrow_id
LEFT JOIN book on borrowdetails.book_id = book.book_id
ORDER BY borrow.borrow_id DESC
")or die(mysqli_error());
while($row=mysqli_fetch_array($user_query)){
$currentdate = date('Y/m/d');
$start = new DateTime($returndate=$row['due_date']);
$end = new DateTime($currentdate);
$fines =0;
if(strtotime($currentdate) > strtotime($returndate)){
$days= $start->diff($end, true)->days;
$fines = $days > 0 ? intval(floor($days)) * 10 : 0;
$fi = $row['borrow_details_id'];
mysqli_query($dbcon,"update borrowdetails set fines='$fines' where borrow_details_id = '$fi'");
}
$id=$row['borrow_id'];
$book_id=$row['book_id'];
$borrow_details_id=$row['borrow_details_id'];
?>
<tr class="del<?php echo $id ?>">
<td><?php echo $row['book_title']; ?></td>
<td><?php echo $row['firstname']." ".$row['lastname']; ?></td>
<td><?php echo $row['type']; ?></td>
<td><?php echo $row['date_borrow']; ?></td>
<td><?php echo $row['due_date']; ?> </td>
<td><?php echo $row['date_return']; ?> </td>
<td><?php echo "₱ ".$fines; ?></td>
<td><?php echo $row['borrow_status'];?></td>
<td> <a rel="tooltip" title="Return" id="<?php echo $borrow_details_id; ?>"
href="#delete_book<?php echo $borrow_details_id; ?>" data-toggle="modal"
class="btn btn-success"><i class="icon-check icon-large"></i>Return</a>
<?php include('modal_return.php'); ?>
<td></td>
</tr>
<?php } ?>
</tbody>
</table>
This is the view_return.php where will admin see the all books pending
This is the history/transaction where the book is already return
For this , you can do like below example, Add a class "test" in anchorTag or in td
and by using jquery
$('.test').click(function(){
$(this).parent().hide();
});
<table>
<tr>
<td>Test</td>
<td class="test" id="returnId1">Return</td>
</tr>
<tr>
<td>Test2</td>
<td class="test" id="returnId2">Return</td>
</tr>
</table>
<?php for($i=0; $i< mysqli_num_rows($result); $i++){ ?>
<table id="t01" style="width:100%">
<tr>
<th colspan="2"><?php print_r($results[$i]['arr_question']); ?></th>
</tr>
<tr>
<td><?php print_r($results[$i]['a']); ?></td>
<td><?php print_r($results[$i]['b']); ?></td>
</tr>
<tr>
<td><?php print_r($results[$i]['c']); ?></td>
<td><?php print_r($results[$i]['d']); ?></td>
</tr>
<tr>
<td colspan="2"><button type="button" onClick="document.getElementById('').innerHTML= '<?php print_r($results[$i]['answer']); ?>'"> Answer </button>
<p id=''></p>
</td>
</tr>
<tr> <td colspan="2"><?php print_r($results[$i]['description']); ?></td>
</tr>
</table>
</br>
<?php } ?>
In this code document.getElementById('').innerHTML is not working properly, it returns the same value while clicking on button in loop, when i put id equals $i it return the value in same place at every loop, it overrides the data at same place, when i put any static value it returns same. What should i do for getting the different value at different places. Any help will be appreciable.
You cannot have empty ids, assign an id as follows:
<p id='p-<?php echo $i; ?>'></p>
And use it as follows in the query selector:
<button type="button" onClick="document.getElementById('p-<?php echo $i; ?>').innerHTML= '<?php print_r($results[$i]['answer']); ?>'"> Answer </button>
Below is my code for display data on print preview..
In this table i need to repeat header on every page.
I need to print only 10 rows in each page..After that need page break and display Data data on next page With repeating header...
Now my prob. is my code repeat header after 10 rows but i cannot understand how to break page after 10 rows and header display on next page...not in middle of the page...
plz help me..
<td width="38%"><input type="submit" value="print" onClick="PrintDiv();" /></td>
<table border="1px solid #666" cellpadding='0' cellspacing='0'>
<thead>
<tr>
<th width="4%">Sr.No</th>
<th width="10%">Book / Recpt No</th>
<th width="7%">Booking Dt</th>
<th width="9%">Copy Start Dt</th>
<th width="14%">Surveyor Name</th>
<th width="18%">Customer</th>
<th width="27%">Coupon No</th>
<th width="5%">Price</th>
<th width="6%">Gift Del.</th>
</tr>
</thead>
<?php
$i=1;
$counter=1;
$pageCounter=1;
foreach($data as $row){
?>
<?php
if($counter==11)
{
$counter=1;
?>
<thead>
<tr class="breakAfter">
<th width="4%">Sr.No</th>
<th width="10%">Book / Recpt No</th>
<th width="7%">Booking Dt</th>
<th width="9%">Copy Start Dt</th>
<th width="14%">Surveyor Name</th>
<th width="18%">Customer</th>
<th width="27%">Coupon No</th>
<th width="5%">Price</th>
<th width="6%">Gift Del.</th>
</tr>
</thead>
<?php } ?>
<tbody>
<tr>
<td height="54"><?php echo $i; ?></td>
<td><?php echo htmlspecialchars($row['book_no']); ?> / <?php echo htmlspecialchars($row['receipt_no']); ?></td>
<td><?php echo htmlspecialchars($row['bookingdate']); ?></td>
<td><?php echo htmlspecialchars($row['startingdate']); ?></td>
<td><?php echo htmlspecialchars($row['surveyor_name']); ?></td>
<td><?php echo htmlspecialchars($row['prefix']); ?>,<?php echo htmlspecialchars($row['customer_name']); ?></td>
<td><?php echo htmlspecialchars($row['cou']); ?></td>
<td><?php echo htmlspecialchars($row['amount']); ?></td>
<td><?php echo htmlspecialchars($row['deliveredgift']); ?></td>
</tr>
<?php $counter++; $i++; }?>
</tbody>
</table>
here i want to pass data-id to the modal and i want to access all other student data to be accessed from the modal when clicking on the edit button. how to access these data in bootstrap modal by passing a single value 'data-id' to it? i can use the jquery too.
my code is
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Roll No</th>
<th>Photo</th>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Father Name</th>
<th>Mother Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<? $count=1; ?>
<?php foreach($students as $student): ?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo $student['roll']; ?></td>
<td><img src="<?php echo $student['photo']; ?>" width="100px" height="100px"/></td>
<td><?php echo $student['name']; ?></td>
<td><?php echo $student['sex']; ?></td>
<td><?php echo $student['email']; ?></td>
<td><?php echo $student['address']; ?></td>
<td><?php echo $student['phone']; ?></td>
<td><?php echo $student['father_name']; ?></td>
<td><?php echo $student['mother_name']; ?></td>
<td><button data-id="<? echo $student['name']; ?>" class="btn btn-success edit" data-toggle="modal" data-target="#edit_modal">Edit</button>
<button data-id="<? echo $student['id']; ?>" class="btn btn-danger" data-toggle="modal" data-target="#delete_modal">Delete</button>
</td>
</tr>
<? $count++; ?>
</tbody>
<?php endforeach; ?>
</table>
You want your php variables in modal to display data related to the id clicked. For this you want your modal to fetch data dynamically. So set a $_SESSION['modal']['student'] variable and set it to null on page load.
In modal, check if $_SESSION['modal']['student'] is null or not, if not null, fill the modal with data to display.
Now to get data in this variable, use ajax, so when clicked on user, fetch ID using jQuery, make an ajax call and on the set your $_SESSION['modal']['student'] variable with required data running your db queries. On success function of AJAX, toggle modal on, which will now display your set data. And in modal php isset clause, in the end after displaying, unset your $_SESSION['modal']['student'] variable.
Alternately, use JSON to return data to your success function in AJAX and set your displayable innerHTML's using jQuery/JS and this response data. Now toggle your modal to show.
Keep in mind to check if variables are set before displaying, to avoid errors on first time page load.
You can use a bit different way of loading modals.
Right now you're triggering it on click (automatically), but if you want to pass the ID to the modal then you would like to trigger modal programatically.
PHP:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Roll No</th>
<th>Photo</th>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Father Name</th>
<th>Mother Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<? $count=1; ?>
<?php foreach($students as $student): ?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo $student['roll']; ?></td>
<td><img src="<?php echo $student['photo']; ?>" width="100px" height="100px"/></td>
<td><?php echo $student['name']; ?></td>
<td><?php echo $student['sex']; ?></td>
<td><?php echo $student['email']; ?></td>
<td><?php echo $student['address']; ?></td>
<td><?php echo $student['phone']; ?></td>
<td><?php echo $student['father_name']; ?></td>
<td><?php echo $student['mother_name']; ?></td>
<td><button data-id="<? echo $student['name']; ?>" class="btn btn-success btn_modal edit" data-target-modal="#edit_modal">Edit</button>
<button data-id="<? echo $student['id']; ?>" class="btn btn-danger btn_modal" data-target-modal="#delete_modal">Delete</button>
</td>
</tr>
<? $count++; ?>
</tbody>
<?php endforeach; ?>
</table>
Now it depends how you want to pass the data-id to the modal. If you're using an iframe i suggest pass it in the URL params like url.com/data-id or if you're fetching somethings via ajax then just include the ajax in the below click trigger code, it will work fine.
JS:
$('.btn_modal').on('click', function(e)
{
var dataId = $(e.currentTarget).attr('data-id');
var modalId = $(e.currentTarget).attr('data-target-modal');
// Ajax Function to load up the details or html for modal to render -- pass the dataId as params
$.ajax({
url: 'someurl.php?student_id='+dataId,
type: "GET",
success: function(data)
{
// Here either you replace the html of the called modal or just replace values depends on what you've thought of.
},
error: function(e)
{
console.log(e);
}
});
$('#'+modalId).modal('show');
});