Develop Reference

How do I Store the Value of Table Data which is Being Passed Dynamically from PHP to JavaScript after a Button Click Event?

I've been Trying to List Users in a 1 to 1 Chat Application in HTML Tables & uniquely Define Each Table cell data by the Name ID dynamically in PHP. The problem is I am Unable to retrieve the Same Table Cell Value after a Button Click for that Particular Record even after Passing the Name value in PHP.
<?php
include("functions.php");
$token = $user_details[5];
// Get all Users except the Logged user
$users_list = get_users_list($user_details[2]);
?>
<table class="table">
<thead class="thead-style">
<tr>
<td class="text-center">Users List</td>
<td class="text-center">Login Status</td>
<td class="text-center"></td>
</tr>
</thead>
<tbody>
<?php
while($fetch = mysqli_fetch_assoc($users_list))
{
?>
<tr class="table-row-users">
<td class="text-center" id="<?php echo $fetch['user_name']; ?>" value="<?php echo $fetch['user_name']; ?>">
<?php echo $fetch['user_name']; ?></td>
<td class="text-center"><?php echo $fetch['user_login_status']; ?></td>
<td class="text-center"><button class="btn btn-outline-primary receiver_email='<?php echo base64_encode($fetch["user_email"]);?>'" id="single_chat" onclick='setReceiver("<?php echo $fetch['user_name']; ?>")'>Chat</button></td>
</tr>
<?php
}
?>
</tbody>
</table>
JavaScript Code
function setReceiver(receiver_name)
{
var to_user_name = document.getElementById(receiver_name).value;//Unable to Retrieve the Value here
console.log(to_user_name);
//$('.receiver').append(to_user_name);
}
I am Facing the Error on the JS Side. Also this is my 1st Question on Stack Overflow.

Update checked state of checkbox in table header on page load

I have a table with a checkbox at the top of the first column to allow the user to select all items in the table and perform an AJAX script. I'm using PHP to generate the html table from a database query - I'd like to set the checked value for the header checkbox if all items in the table are also checked for the same column.
In the PHP file I'm setting up the table and the header rows first, then doing a foreach loop to create the table rows from the found records. I could add a counter along the way to track how many rows are checked, but as this is happening after the table header I can't see a way to subsequently update the header row? Unless this could be done via Javascript?
Here's my PHP page that generates the table:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /> </th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
$found = $result->getFoundSetCount();
foreach($records as $record) {
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
} else {
$checked = ' checked';
}
?>
<tr class="" id="<?php echo $recid ?>">
<td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td>
</tr>
} // foreach

i did not test this code, but i think is what do you search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var allAreChecked = true;
$("table > tbody > tr > td > input[type=checkbox]").each(function(){
if(! $(this).is(':checked'))
allAreChecked = false;
});
if(allAreChecked === true){
$("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
}
});
</script>

simple do the trick with string concatenation like below
1st : First run the foreach loop and concatenate all tr as a string .
2nd : Outside the foreach loop Set the $check_all_button=true; in foreach loop check any row is not checked means set the variable to false.
3rd : After all this concatenate the table header part with another variable . based on $check_all_button variable value check the checkbox .
4th : Finally echo the both variables . to render the html table .
<?php
$found = $result->getFoundSetCount();
$table_tr='';
$check_all_button=true;
foreach($records as $record)
{
$productID = $record->getField('productID');
if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
$checked = '';
$check_all_button=false;
} else {
$checked = ' checked';
}
$table_tr.="<tr class='' id='<?php echo $recid ?>'>
<td id='<?php echo $productID; ?>'><input type='checkbox' class='select-item checkbox' name='select-item' value='<?php echo $productID; ?>' <?php echo $checked; ?>></td>
<td><?php echo $productID; ?></td>
<td><?php echo $record->getField('Description'); ?></td></tr> ";
<?php
}
$check_all_button=true;
$table_and_head='';
$table_and_head.="<table class='table table-condensed table-striped table-bordered'>
<thead>
<th><input type='checkbox' class='select-all checkbox' name='select-all'";
if($check_all_button==true){ $table_and_head.=' checked'; }
$table_and_head.=" /> </th>
<th class='text-center' scope='col'>Product ID</th>
<th class='text-center' scope='col'>Description</th>
</thead>
<tbody> </tbody> </table>";
echo $table_and_head;
echo $table_tr;
?>

How to hide table row dynamically on dropdown change?

Here I've a drop-down and when user changes this drop-down, I want to show only specific table rows e.g. if Patient Type=Inpatient then JQuery will show only those records .The table rows are dynamically generated by php code. Please suggest me the way i'm new in JQuery.
My drop-down is:
<tr>
<td style="text-align:left"><label>Patient Type:</label></td>
<td>
<select id="patient_type">
<option>Select patient type</option>
<option>InPatient</option>
<option>OutPatient</option>
</select>
</td>
</tr>
The PHP code:
<table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<th>
Patient_name
</th>
<th>
Patient Type
</th>
<th>
Payment Type
</th>
<th>
Date
</th>
<th>Amount</th>
</tr>
<?php
$query="SELECT
doctor.doctor_name,inovoice.patient_name,inovoice.patient_type,inovoice.payment_type,inovoice.inovoice_date,inovoice.inovoice_amount from doctor,inovoice,prescription
where doctor.doctor_name=prescription.doctor_name and inovoice.patient_name=prescription.patient_name and doctor.doctor_name='$_SESSION[doctor_nm]' and inovoice.inovoice_date between '$_SESSION[from_dt]' and '$_SESSION[to_dt]' $sortingCode ";
$result=mysql_query($query);
while($row=mysql_fetch_array($result))
{
$newdate=date("d/m/Y", strtotime($row['inovoice_date']));
?>
<tr>
<td><?php echo $row['patient_name'];?></td>
<td id="<?php echo $row['patient_type'];?>"><?php echo $row['patient_type'];?></td>
<td id="<?php echo $row['payment_type'];?>"><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
<?php
}
?>
JQuery code:
$( document ).ready(function() {
$('#patient_type').change(function(){
if($(this).val() == "InPatient")
{
alert("hiiiii");
//show InPatient
}
})
});

First of all you should't use id, because it is possible that there are rows with the same id. An id should always be unique. The second thing is if you want to show/hide the rules you should use a identifier on rule (tr) level. If you are using jQuery you can use a data tag, for example:
<tr data-patientType="<?php echo $row['patient_type'];?>">
<td><?php echo $row['patient_name'];?></td>
<td><?php echo row['patient_type'];?></td>
<td><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
In jQuery you would get something like the code below:
$( document ).ready(function() {
$('#patient_type').change(function(){
var selectedValue = $("#patient_type option:selected").text();
$('table tr').each(function(){
if($(this).data('patientType') == selectedValue)
{
$(this).css('display', 'block');
}
else
{
$(this).css('display', 'hidden');
}
});
})
});

You need to find the selected option from the select, not it's value.
$( "#patient_type option:selected" ).text();

change row color of jquery datatable if row is checked?

I have a jquery dataTable (this is link) in each row there are a checkbox! I whish that when the checkbox is checked the row color change!
I try in this way:
tableCode;
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità</th>
<th>Quantità di alert</th>
<th>Stato</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<td><?php echo $row->aic; ?></td>
<td><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td> <input type="checkbox" name="radiog_lite" id="<?php echo $row->aic; ?>" class="css-checkbox" />
<label for="<?php echo $row->aic; ?>" class="css-label"></label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
jQuery code:
jQuery(document).ready(function() {
jQuery('input').click(function() {
jQuery(this).parents("tr").css('background-color', 'yellow');
});
});
This code color only the rows that have an index odd!If I inspect the element from the browser background-color: yellow is added to all rows! Help me thanks in advance!
I think that the problem is bootstrap dataTable.

if you want only that row to change color for which checkbox is checked then you have to use closest() and use change event for it:
jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});

jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
if(this.checked) // check if checkbox checked then change color of row
jQuery(this).closest("tr").css('background-color', 'yellow !important');
});
convert angulerjs

Use closest() to find the parent <tr>
Your elements are getting appended later to the DOM, use event delegation,
jQuery(document).ready(function() {
jQuery(document).on('click','input',function() {
jQuery(this).closest("tr").css('background-color', 'yellow');
});
});

colspan does not work in jquery toggle or show hide

I am assuming that toggle() show() and hide turns a element into a block element therefore disabling the capabilities to use colspan. When I am not hiding the TR, colspan works perfectly. as soon as a toggle or do the show hide, it no longer works.
Is there a jquery method out there that will successfully show and hide a table row while mainting the table cell row.
I somewhat found the solution considering the following.
HTML
<h3 class="tac"><?php echo 'Communications';?></h3>
<br/><br/>
<table class="projects-table-style deposit-table communication" cellpadding="0" cellspacing="0">
<tr>
<th>Date</th>
<th>Consultant</th>
<th>Country</th>
<th>Rating</th>
<th>Communications</th>
<th>Last Bid</th>
<th>Memorandum</th>
</tr>
<?php
$i = 0;
foreach ($comments as $comment):
$class = null;
if ($i++ % 2 == 0) {
$class = ' class="altrow"';
}
?>
<tr<?php echo $class;?>>
<td>Date</td>
<td>
<?php echo $comment['User']['username']; ?>
</td>
<td><?php echo $comment['User']['Country']['name']; ?></td>
<td>Rating</td>
<td>
x communcations
Reply
</td>
<td>Last Bid</td>
<td>Memorandum</td>
</tr>
<tr style="display:none" class="reply-box">
<td style=" background: #fff" colspan="7">
<table width="100%">
<?php foreach($comment['Comment'] as $com): ?>
<tr>
<td width="20%">
<?php echo $com['From']['username']; ?>
</td>
<td>
<?php echo $com['comment']; ?>
</td>
<td width="15%">
<?php echo $com['created']; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $this->Form->create('Project');?>
<?php echo $this->Form->input('message',array('type'=>'textarea','cols'=>'77','style'=>'margin-right:0px;padding:0px;'));?>
<?php echo $this->Form->end(__('Submit', true,array('attribute'=>'value')));?>
</td>
</tr>
<?php endforeach; ?>
</table>
JS
$(document).ready(function() {
$('.reply-to').click(function(){
$(this).parent().parent().next().toggle('slow');
return false;
});
});
So long as I toggle .reply-box which is appended to the TR. the TD element nested within will maintain its table-cell structure and will still keep the colspan attribute. just wanting to know if anyone else knows a better solution.

The jQuery API for .show() says this:
This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
However, I'm not sure how it will function if the element is originally hidden (using display: none in either a CSS declaration or inline style); though I couldn't get it to break in a jsFiddle so I think it should function correctly.