onclick() does not work in a table - javascript

i created an appointments table and added two links to accept and reject appointments. the links are displayed in every row of the table but when i click it the text accept & reject are only displayed in the first row & I also need to know how to insert the text that appears after the button click into the db i would request someone to pls provide me some help thanks!
<form method="post" action="delete.php" >
<table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">
<thead>
<tr>
<th>appoinment ID</th>
<th>Date</th>
<th>time</th>
<th>teacher</th>
<th>parent</th>
<th> accept/reject </th>
<th>label</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($conn, "select * from `app` left join `par` on par.par_id=app.par_id
left join `tea` on tea.tea_id=app.tea_id
ORDER BY app_id DESC");
if($query === false)
{
throw new Exception(mysql_error($conn));
}
while($row=mysqli_fetch_array($query))
{
$ann_id=$row['app_id'];
$date=$row['date'];
$msg=$row['time'];
$username = $row['username'];
$username = $row['p_username'];
?>
<tr>
<td><?php echo $row['app_id'] ?></td>
<td> <?php echo date('j/m/y',strtotime($row['date'])); ?></td>
<td><?php echo $row['time'] ?></td>
<td><?php echo $row['p_username'] ?></td>
<td><?php echo $row['username'] ?></td>
<td> reject
accept
</td>
<td>
<div id="chgtext">PENDING</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</form>

In jQuery it would look like this:
<td>
reject
accept
</td>
<td>
<div class="chgtext">PENDING</div>
</td>
Then, before closing body tag:
<script>
$(document).ready(function(){
$('.reject').on('click', function(){
var row = $(this).closest('tr'); //find the row the link is in
var thediv = row.find('.chgtext') //find the correct div within that tr
$(thediv).text('reject');
});
$('.accept').on('click', function(){
var row = $(this).closest('tr'); //find the row the link is in
var thediv = row.find('.chgtext') //find the correct div within that tr
$(thediv).text('accept');
});
});
</script>
You can make the code shorter, but I wanted to show you how it works step by step.

Related

How to print using iframe? ID does not get when print button is click

I want to print information that depends on the $stud_no using iframe. When I show the iframe in the table, it generates a correct $stud_no. But when I click the print button it only shows the First $stud_no. It's like the button didn't GET the id in admin_print-app-form-view.php
admin_print-app-form.php
<table id="dataTable2" class="text-center">
<thead class="text-capitalize">
<tr>
<th>NO.</th>
<th>LAST NAME</th>
<th>FIRST NAME</th>
<th>MIDDLE NAME</th>
<th>SEX</th>
<th>CONTACT NO.</th>
<th>ENTRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM stud_acc";
$result = $con->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$iframeId = 'studframe' . $row['stud_no'];
$stud_no = $row['stud_no'];
$lastname = $row['lastname'];
$firstname = $row['firstname'];
$middlename = $row['middlename'];
$sex = $row['sex'];
$contact = $row['contact'];
$entry = $row['entry'];?>
<tr>
<td><?php echo $stud_no ?></td>
<td><?php echo $lastname ?></td>
<td><?php echo $firstname ?></td>
<td><?php echo $middlename ?></td>
<td><?php echo $sex ?></td>
<td><?php echo $contact ?></td>
<td><?php echo $entry ?></td>
<td>
<iframe src="admin_print-app-form-view.php?id=<?php echo "$stud_no"?>" name="frame" id="<?= $iframeId ?>" style="visibility:hidden;height:0px;width:0px"></iframe>
<button type="button" class="btn btn-roundedtb btn-info" onclick="document.getElementById('<?= $iframeId ?>').print();"><i class="fa fa-print"></i><span class="icon-name"> Print</span></button>
</td>
</tr>
} }?>
</tbody>
</table>
admin_print-app-form-view.php
<?php
session_start();
include("connection.php");
$stud_no = $_GET['id'];
?>
This is the print preview.The number in the Red circle should be the $stud_no that I clicked, but it always gives me first stud_no
The issue is that when you give the same name and id to every iframe, javascript will only give you the first match it finds, returning the same iframe for all buttons.
We need to give them unique id's (we can skip the name altogether).
Note: This code assumes that stud_no is a unique value, like the tables primary key.
In your while-loop, create a unique id:
while($row = $result->fetch_assoc()) {
// Create a unique id using the stud_no
$iframeId = 'studframe' . $row['stud_no'];
Now give the iframe that id:
<iframe ... id="<?= $iframeId ?>" ... ></iframe>
And make sure the button refers to that id:
<button ... onclick="document.title=''; document.getElementById('<?= $iframeId ?>').print();">...</button>
In the above code, I've created unique id's by prefixing them with studframe and then added the stud_no so it becomes id="studframe1", id="studframe2" and so on.
Then when referring to that specific iframe, we're fetching the iframe based on that unique id.

'Copy to the clipboard' button works only on the first page of DataTables

I have a data table in which there are columns and rows and one of them is a copy button which onclick() initiates a copy function and copies a particular row to the clipboard, it works normally on the first page but when I use the search or the pagination it does not work and the button does not initiate the javascript function.
I searched and found in StackOverflow that I need to reinitiate the data table, which I tried but it gives an error
DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
i have used the modified code that I tried after I searched StackOverflow after which it gives an error
DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
('#datatable').dataTable({ "fnDrawCallback": function(oSettings) {
//code
}});
});
<table id="datatable" class="table table-striped table-bordered" class="dass">
<thead>
<tr>
<th>No.</th>
<th>Student ID</th>
<th>Reference</th>
<th>First Name</th>
<th>Last Name</th>
<th>Copy</th>
</tr>
</thead>
<tbody>
<?php
$numm=1;
$stmt = $DB_con->prepare("SELECT * FROM asd);
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{ ?>
<tr>
<td>
<?php echo $row['id']; ?>
</td>
<td>
<?php echo strtoupper($row['stid']); ?>
</td>
<td>
<?php echo $row['ref']; ?>
</td>
<td>
<?php echo $row['fname']; ?>
</td>
<td>
<?php echo $row['lname']; ?>
</td>
<td>
<button onclick="textToClipboard<?php echo $numm;?>()">Copy</button>
</td>
<th>
<script>
function textToClipboard <?php echo $numm;?> () {
var space = " ";
var x = document.getElementById('datatable').rows[<?php echo $numm;>].cells[1].innerHTML;
var y = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[2].innerHTML;
var z = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[3].innerHTML;
var text = x.concat(space, y, space, z, space, q, space, w);
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
</script>
</th>
</tr>
<?php $numm++;
} ?>
</tbody>
How can I bind it with the data table?
It's not really a good practice to redefine a function again and again in a loop like this - that is what's parameters are for. I can't test this code, but here's an approach i would recommend:
<script>
function textToClipboard(numm) {
var space = " ";
var x = document.getElementById('datatable').rows[numm].cells[1].innerHTML;
var y = document.getElementById('datatable').rows[numm].cells[2].innerHTML;
var z = document.getElementById('datatable').rows[numm].cells[3].innerHTML;
var text = x.concat(space,y,space, z,space, q,space, w);
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
</script>
<table id="datatable" class="table table-striped table-bordered"
class="dass">
<thead>
<tr>
<th>No.</th>
<th>Student ID</th>
<th>Reference</th>
<th>First Name</th>
<th>Last Name</th>
<th>Copy</th>
</tr>
</thead>
<tbody>
<?php
$numm=1;
$stmt = $DB_con->prepare("SELECT * FROM asd");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<tr><td><?php echo $row['id']; ?></td>
<td><?php echo strtoupper($row['stid']); ?>
</td>
<td><?php echo $row['ref']; ?></td>
<td><?php echo $row['fname']; ?></td>
<td><?php echo $row['lname']; ?></td>
<td><button onclick="textToClipboard(<?php echo $numm;?>)">>Copy</button></td>
</tr>
<?php
$numm++;
} ?></tbody>
So define one parametered function first, and then call that later.
Furthermore, I'm unsure on how datatables handles selecting .rows[numm] after you search or use the pagination function. Therefore an even safer solution would involve passing all your required parameters in the function call, something like this:
onClick="textToClipboard($row['ref'], $row['fname'], $row['lname'])"
But this relies entirely on what you're trying to achieve here.
To avoid Cannot reinitialise DataTable Warning, just add
"destroy": true,
while initialising it. That will reinitialise a datatable again when you call it second time.
Read more:
https://datatables.net/reference/option/destroy
https://datatables.net/reference/api/destroy() -- destroy method

MDL Checkbox Function MaterialCheckbox.check() doesn't work on ajax content

I am working with MDL Checkbox where i need to delete all values at once. As i did some research and looks like old method is deprecated : Deprecations for MDL Data Table Checkbox and mdl-data-table--selectable can't be used anymore.
HTML Code:
<div class="load_customer">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--7-col-phone">
<thead>
<tr>
<th>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" id="table-header" for="table-input">
<input type="checkbox" id="table-input" class="mdl-checkbox__input" />
</label>
</th>
<th>Sr. No</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Anniversary</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
$select = $pdo->query("SELECT * FROM `accounts` ORDER BY `id` DESC");
while($fetch = $select->fetch()){
?>
<tr>
<td>
<label class="mdl-checkbox child_checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" data="<?php echo $fetch['id'];?>" for="row[<?php echo $i;?>]">
<input type="checkbox" id="row[<?php echo $i;?>]" class="mdl-checkbox__input" />
</label>
</td>
<td><?php echo $i;?></td>
<td><?php echo $fetch['name'];?> </td>
<td><?php echo $fetch['gender'];?></td>
<td><?php echo $fetch['dob'];?></td>
<td><?php echo $fetch['anniversary'];?></td>
<td><?php echo $fetch['address'];?></td>
<td><?php echo $fetch['phone'];?></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
So after adding it manually it works fine until i load table with ajax. Then it all stops working. I am able to check main checkbox #table-header, but function which checks all checkboxes (MaterialCheckbox.check()) does not works anymore. I checked console & there are no errors in console.
Javascript Code
var arr = [];
$(document).on("click","#table-header input",function() {
var all_elements = document.querySelectorAll('.child_checkbox');
for(var i=0, n=all_elements.length; i<n; i++){
var element = all_elements[i];
if($('#table-header input').is(":checked")) {
element.MaterialCheckbox.check();
var ids = element.getAttribute("data");
arr.push(ids);
}
else {
element.MaterialCheckbox.uncheck();
var removeItem = element.getAttribute("data");
arr = $.grep(arr, function(value) {
return value != removeItem;
});
}
}
});
I am using componentHandler.upgradeAllRegistered() and Checkbox is working fine, but it does not loop through all checkboxes.
$.post("load_customer.php",function(data){
$(".load_customer").html(data);
componentHandler.upgradeAllRegistered();
});
Please help me with this.Thanks.

How to pass the id from each row of a loop table using jquery when edit button is click?

I have a table that displays all the data from my database and I've added a new column for edit button on each row so that this would update the data from my database when the user click a certain button he wants to update.
I have this code to loop through the data and display in a tabular format in my page:
<!--############## TABLE HEADER ##############-->
<thead>
<tr>
<th>Dummy ID</th>
<th>Date</th>
<th>NCA Balances</th>
<th>Account</th>
<!-- Update Button on each row -->
<th style="text-align:center;">Update</th>
</tr>
</thead>
<!--##########################################-->
<!--############# TABLE CONTENT ##############-->
<tbody>
<?php
$s1 = mysql_query("SELECT * FROM nca_totals");
while($row = mysql_fetch_array($s4)) {
$db_id = $row['total_id'];
$db_date = $row['nca_date'];
$db_balance = $row['nca_total'];
$db_account = $row['account_type'];
?>
<tr>
<!-- Input fields to be hidden just to get the ID value -->
<td><input type="text" id="total_id" value="<?php echo $db_id ?>"></td>
<td><?php echo $db_date ?></td>
<td><?php echo number_format($db_balance,2) ?></td>
<td><?php echo $db_account ?></td>
<td style="text-align:center;">
<button type="button" id="btn-update">Update</button>
</td>
</tr>
<?php } ?>
</tbody>
<!--##########################################-->
I want to use Ajax in jQuery so that when the user click the button update, the page does not have to reload. But first, I want to confirm that I get exactly the ID on each row and pass it to my jquery function like this:
update_nca.js
$(document).ready(function(){
// Get the values
$("#btn-update").click(function(){
var total_id = $("#total_id").val();
alert(total_id);
});
});
When I click the first button on the first row, It gets the ID from my table. But on the next row as well as the other row, no ID has been pass into my jquery. It doesn't get any value from my dummy textbox. Please help me improve my codes. Any help would be appreciated. Thanks
you are sharing the same ID to multiple inputs which makes a problem! I think you better use a class instead or remove it.
<tr>
<!-- Input fields to be hidden just to get the ID value -->
<td><input type="text" class="total_id" value="<?php echo $db_id ?>"></td>
<td><?php echo $db_date ?></td>
<td><?php echo number_format($db_balance,2) ?></td>
<td><?php echo $db_account ?></td>
<td style="text-align:center;">
<button type="button" class="btn-update">Update</button>
</td>
</tr>
$(".btn-update").click(function(){
var total_id = $(this).closest('tr').find('.total_id').val();
alert(total_id);
});
Id should be unique in any HTML document. You can use classes to represent the identity. Change id="total_id" to class="total_id". And id="btn-update" to class="btn-update".
Then, use this code to get the value from the total-id input.
$(".btn-update").click(function(){
var total_id = $(this).parent().parent().find(".total_id").val();
alert(total_id);
});
BTW way, $(this) represented the element that's taking the event, in this case the update button.
I suggest you pass the db_id value to a data- attribute, perhaps named data-db-id. Since each <tr> represents a record, place the data-db-id attribute on each <tr> element. Then with jQuery, retrieve the value of the data- attribute with the .data method: var id = $(this).data('db-id'). See complete example below:
<?php
$s1 = mysql_query("SELECT * FROM nca_totals");
while($row = mysql_fetch_array($s4)) {
$db_id = $row['total_id'];
$db_date = $row['nca_date'];
$db_balance = $row['nca_total'];
$db_account = $row['account_type'];
?>
<tr data-db-id="<?= $db_id ?>">
<td><?= $db_date ?></td>
<td><?= number_format($db_balance,2) ?></td>
<td><?= $db_account ?></td>
<td style="text-align:center;">
<button class="btn-update">Update</button>
</td>
</tr>
<?php } ?>
</tbody>
<script>
$('table').on('click', '.btn-update', function() {
var id = $(this).closest('tr').data('db-id');
// do something with the id....
});
</script>
Note a few changes:
This example uses the short PHP echo syntax (<?= $foo ?>).
Event delegation is used here. Read more here.
As others have already said, keep your id attribute values unique. (i.e., switch id="btn_update" in your loop to `class="btn_update")

How to get value table row value using jquery/ajax

<?php
include "config.php";
// Fetch the data
$con = mysql_query("select * from product");
?>
<div style=" height:250px; overflow:auto;">
<table class="table table-striped table-bordered dTableR" id="ajxtable">
<tr>
<th>Jobno</th>
<th>Product</th>
<th>Qty</th>
<th>Designed by</th>
<th>Action</th>
</tr>
<?php
while ($row = mysql_fetch_array($con)) {
$id = $row['id'];
$pcode = $row['pcode'];
$lproduct = $row['lproduct'];
$mrprate = $row['mrprate'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $lproduct; ?></td>
<td><?php echo $mrprate; ?></td>
<td><?php echo "admin"; ?></td>
<td><input type="button" id="addmorePOIbutton1" style="width:25px;" value="+" onClick=""/>
<input type="button" id="delPOIbutton1" style="width:25px;" value="-" onClick=""/></td>
</tr>
<?php
}
?>
</table>
</div>
This is ajax page. Below table is auto refreshed every 5 seconds.
My doubt is how to get that particular row value.
When i click table row + button, get these particular row values, and place to index page text box and this '+' button also hide.
Kindly suggest any jquery or ajax code for adding below code.
I am new to jquery ,,anybody help me with sample code..that would help me greately. Thanks in advance
$(document).ready(function () {
$('#yourtablename tr').click(function (event) {
alert($(this).attr('id')); //trying to alert id of the clicked row
});
});
Above code may be help you and another solution is:
$('td').click(function(){
var row_index = $(this).parent().index();
var col_index = $(this).index();
});

Categories