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.

Why getElementById is not working with php echo when creating a dynamic table?

I'm trying to create a table, and in each row there will be a picture, and when the picture is clicked a js function gets executed, each entry of a row in the table will create a js script for the picture of that row. And for that reason I'm using <?php echo ?> on the id of the image and on the getElementById in the script. And I have no problem using the echo on the id of the image, but if I put it inside getElementById the js code doesn't get executed. And if I write instead directly the number of the id let's say
getElementById("3") instead of getElementById("<?php echo $contact['id']; ?>") it works perfectly, but if use echo it doesn't, even when the source code of the loaded page shows that getElementById("<?php echo $contact['id']; ?>") successfully got printed as getElementById("3")
Here's the full table's code:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $contacts = getContacts();
if($contacts->num_rows) {
foreach($contacts as $contact) { ?>
<tr>
<td>
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage("");'>
<script type="text/javascript">
function removeImage() {
document.getElementById("<?php echo $contact['id']; ?>").style.display = "none";
}
</script>
</td>
<td><?php echo $contact['Name']; ?></td>
<td><?php echo $contact['Status']; ?></td>
</tr>
<?php }} ?>
</tbody>
</table>

When looping, you are recreating the same function over and over again, but with a different ID in each. However, you can't create the same function over and over again with the same name.
On your img change removeImage('') to removeImage(this)
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage(this);'>
Then outside of the loop just have a single function that refers to the element passed to it
function removeImage(el) {
el.style.display = "none";
}

Can't pass formatting to javascript

I have a question regarding reading a webpage then printing a pop up copy.
Basically I have a form on page A. If the user elects to pay by check, their invoice will popup in a new window B which is a print preview. The invoice table found on A is well formatted. Unfortunately in the pop up print page B, the table formatting (in fact all the page formatting) is gone. Namely, the centring of the first column and right justifying of the 2nd, row shading, and table border.
I was thinking of creating 3 divs; one before, one after and one including the table invoice, but all my attempts give a misformatted table. Then I thought I'd rewrite using divs in the page A, and rewriting the popup printer page to reflect this (multiple strings getting written as strHeader, strTable, strFooter). Any thoughts on how best to proceed?
Here's my code:
<script type="text/javascript">
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=1000%,height=1000%')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write("<b><font size= '6' >" + 'Event Registration' + " </font></b>")
newwin.document.write(str)
newwin.document.write('footer info goes here')
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
</script>
<?php $this->set('title_for_layout', 'Event Registration Payment')?>
<?php if($eventRegistration['EventRegistration']['payment_type'] =="cheque"):?>
<b>To pay by cheque...</b> click here
<?php endif;?>
<DIV id="print_div1" style="border:1px solid #000000">
<?php echo $this->Session->flash(); ?>
<?php echo $this->requestAction('/liveEditRegions/getRegion/60'); ?>
<table class="invoiceTable" style="margin-bottom: 10px;">
<tr class="titleRow">
<th class="center">Item</th>
<th class="center">Price</th>
</tr>
<!-------------------------------------registration-->
<?php if($registrationPrice > 0):?>
<tr>
<th class="center">Registration Price</th>
<td class="right">$<?php echo number_format($registrationPrice, 2) ?></td>
</tr>
<?php endif;?>
<!-------------------------------------------events-->
<?php if($eventRegistration['EventRegistration']['dinner_ticket_number'] > 0):?>
<tr>
<th class="center">Dinner Ticket(s) x <?php echo $eventRegistration['EventRegistration']['dinner_ticket_number']?> # $<?php echo number_format($eventRegistration['EventRegistration']['dinner_ticket_price'])?></th>
<td class="right">$<?php echo number_format($dinnerticketTotal, 2) ?></td>
</tr>
<?php endif;?>
<?php if($eventRegistration['EventRegistration']['student_social_ticket_number'] > 0):?>
<tr>
<th class="center">Student Social Ticket(s) x <?php echo $eventRegistration['EventRegistration']['student_social_ticket_number']?> # $<?php echo number_format($eventRegistration['EventRegistration']['student_social_ticket_price'])?></th>
<td class="right">$<?php echo number_format($ssticketTotal, 2) ?></td>
</tr>
<?php endif;?>
<tr>
<th class="right">Sub total</th>
<td class="right">$<?php echo number_format($subtotal, 2); ?></td>
</tr>
<tr>
<th class="right">TAX</th>
<td class="right">$<?php echo number_format($tax, 2); ?></td>
</tr>
<tr>
<th class="right">Total</th>
<td class="right">$<?php echo number_format($total, 2); ?></td>
</tr>
</table>
<!-----------------------------------------CHOOSE PAYMENT-->
<?php if($eventRegistration['EventRegistration']['payment_type'] =="credit card"):?>
[snip]
<?php endif;?>
<?php if($eventRegistration['EventRegistration']['payment_type'] =="cheque"):?>
<?php endif;?>
</DIV>

Try seeing if there is a css stylesheet overiding your change. Maybe explicitly create a table style on the new page to double check.

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');
});
});

jQuery checkbox does not trigger event after Select All method

I have a table with some jQuery checkboxes. As each checkbox is clicked, this triggers a method to update a total in the bottom row using: onclick="UpdateTotalFee()"
When the page initially loads, everything works perfectly as expected. Each checkbox click fires the UpdateTotalFee() method.
Where the problem arises is after a user clicks the select all link. This operates to select all of the checkboxes correctly, however, subsequent clicks on the checkboxes no longer trigger the method to update the total.
When I inspect in firebug, one difference that I can see is that when the page first loads, clicks on the checkboxes seem to be clicking on the span.checkboxplaceholder, but after clicking the select all link, subsequent clicks on the checkboxes do not seem to invoke the same thing.
I hope I've explained the situation well enough. Here is the complete code for the table:
<table border="1">
<tr>
<th></th>
<th style="vertical-align:middle;">Number</th>
<th style="text-align:left; vertical-align:middle;">Owner</th>
<th style="text-align:left; vertical-align:middle;">Address</th>
<th style="vertical-align:middle;">Code</th>
<th style="vertical-align:middle;">Class</th>
<th style="vertical-align:middle;">Filing Fee</th>
<th style="text-align:center; width:75px;">Review ?<br />
<strong>All</strong>
or
<strong>None</strong>
</th>
</tr>
<?php foreach ($property['commercial'] as $key => $value): ?>
<tr>
<th><?php echo str_pad($row++, 2, '0', STR_PAD_LEFT); ?></th>
<td><?php echo RollNumber($value['property#']); ?></td>
<td style="text-align:left"><?php echo $value['Property Owner']; ?> </td>
<td style="text-align:left"><?php echo $value['Property Address']; ?></td>
<td style="text-align:middle" ><?php echo number_format($value['PC'],0); ?></td>
<td><?php echo $value['Class']; ?></td>
<td><?php echo money_format('$%.0i', 140); ?></td>
<td id="com" style="padding-left:25px;" onclick="UpdateTotalFee()">
<input type="checkbox" name="file_com_appeal" class="com-checkbox" value="<?php echo $value['property#'] ?>"></td>
</tr>
<?php endforeach; ?>
<th colspan="6" style="text-align:right; padding:1% 1% 1% 0%;">
<h4>TOTAL</h4><h5><span id="AppealSelected"></span></h5></th>
<th ><h4><span id="AppealFeeTotal"></span></h4></th>
<th></th>
Here is the Javascript function that is supposed to be called with each click of the checkbox:
function UpdateTotalFee(){
var AppealCount = 0;
$('input[name=file_com_appeal]').each(function(){
if($(this).attr('checked')){
AppealCount++;
}
});
$('#AppealSelected').text(
(AppealCount == 0 ? '' : '(' + AppealCount + ' of ' + <?php echo count($property['commercial']);?> + (AppealCount == 1 ? ' property selected)' : ' properties selected)')));
$('#AppealFeeTotal').text("$"+(AppealCount*140));
}

checkboxes trigger "onchange" event if it is (un)checked.so rather listen for this event in your javascript code. And then check the whether the checkbox is checked in your event handler to apply changes to the total amount.
Sample:
[HTML]
<input type="checkbox" name="check" id="check" value="1" onchange="updateAmount();"/>
[JS]
function updateAmount(){
if($('input#check').is(':checked')){
// checked
}else{
// unchecked
}
}

Please create one new function and call that function onclick of select All and pass the total row count as a parameter of this function so you can calculate easily the total amount.
like totalamount= count*140
and set this value using below code
$('#AppealFeeTotal').text("$"+(totalamount));