We Keep Coding

Datatable reorder issue

I'm having an issue with the following code. What I'm trying to do is to populate a modal form with data from the row on which you pressed the edit button.
The script works fine until I try to reorder the table: when the table is reordered the script is getting the information of the pre-reordered table.
This is the script that get called when the edit button get clicked:
$(document).ready( function () {
//create datatable
//declaring a variable without var makes it global
table_movimenti = $('#movimenti').DataTable();
$('#movimenti table tbody tr td').on('click', function () {
$("#transaction_ID").val($(this).find("td:eq(6)").attr('id'));
$("#data_cont").val($(this).find("td:eq(0)").text());
$("#data_valuta").val($(this).find("td:eq(1)").text());
$("#importo").val($(this).find("td:eq(2)").text());
$("#divisa").val($(this).find("td:eq(3)").text());
$("#causale").val($(this).find("td:eq(4)").text());
var categoria=$.trim($(this).find("td:eq(5)").text());
$("#categoria option").each(function() {
if($(this).text() == categoria){
//$(this).prop("selected", true);
$(this).attr("selected", "selected");
return;
}
});
});
This is the table:
<?php
echo "<table id='movimenti' class='table table-bordered table-striped table no-margin'>";
echo "<thead>";
echo "<tr>";
echo "<th>Data contabile</th>";
echo "<th>Data valuta</th>";
echo "<th>Importo</th>";
echo "<th>Divisa</th>";
echo "<th>Causale</th>";
echo "<th>Categoria</th>";
echo "<th>Edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr class='table_row'>";
echo " <td>" . $row['Data_cont'] . "</td>";
echo " <td>" . $row['Data_valuta'] . "</td>";
echo " <td>" . $row['Importo'] . "</td>";
echo " <td>" . $row['Divisa'] . "</td>";
echo " <td>" . $row['Causale'] . "</td>";
echo " <td>";
foreach ($categories as $value){
if ($value['ID'] == $row['Categoria']){
echo " <span class='label label-success'>";
echo "". $value['Descrizione'] ."";
echo "<input type='text' class='label label-success' id='categoria' name='categoria' value='". $value['Descrizione'] ."'/>";
echo "</span></td>";
}
}

In the end I've completely change the approach and now I'm building my table using ajax option in datatable.
In this way I'm able to retrieve all the data in the row using the same ajax option.

Hide Rows on Click Table

I'm trying to create a table that has individual lines with a summary of individual invoices(e.g. Invoice Date, Invoice Total,Status, etc).
I want to be able to click on the row and for it to expand down and show me the detailed information relating to that invoice, however I haven't been able to solve the issue that I need to isolate the row and then expand the new information underneath it?
Keeping in mind a < div > can't surround a < tr > element so I can't hide the < div > and < tbody > wants to encompass the whole table body not just a set of rows.
My PHP and HTML skills I are decent but my knowledge of javascript is not, so any assistance in getting this going is appreciated.
<table>
<tr><th colspan='6'><h2>Billing Details</h2></tr><tr><td>Invoice ID</td><td>Invoice Date</td><td>Due Date</td><td>Date Paid</td><td>Total</td><td>Status</td>
<?php
for ($counter = 0; $counter < $invoicesData['numreturned']; $counter++)
{
echo "<tr><td>WellConn - " . $invoicesData['invoices']['invoice'][$counter]['id'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['date'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['duedate'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['datepaid'] . "</td>";
echo "<td>$" . $invoicesData['invoices']['invoice'][$counter]['total'] . "</td>";
echo "<td>" . $invoicesData['invoices']['invoice'][$counter]['status'] . "</td></tr>";
}
?> </table>
Any help is greatly appreciated.

Try this pattern bro..
<tr onclick="myFunction()">
<td id="td1" hidden> <?php echo ?> </td>
</tr>
<script>
function myFunction(){
document.getElementById("td1").style.display = "table-row";
}
</script>
Automatically hide the td's.When you click the tr, the td's will show.Cheers bro.

JQuery preventDefault not working with .on click

I have a row of data, which when clicked, show information about the object.
But I also have a button on the row, which when clicked performs some jquery wizzardry.
Anyway, I can't seem to prevent the row click and just fire the button stuffs.
I've tried:
return false;
e.preventDefault();
e.stopPropagation();
This is the function.
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
I have all 3 in there at the moment, but that's just for example. Although I have tried all 3 in there, but I have also tried each one separately.
Heres the HTML
<div class="row" id="check_container">
<div id='table_holder' class="col-md-12" >
<table id="org_table" class="sortable table table-striped tablesorter">
<?php
if(empty($org_data2)) {
// if there is no data for the selected filter
echo "There are no organisations set up.";
} else {
echo "
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sub Orgs</th>
<th>Locations</th>
<th>Users</th>
<th>Compliance</th>
<th>O/D Checks</th>
<th>O/D Training</th>
<th>Renewal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
";
foreach ($org_data2 as $orgs) {
if(!$orgs->descendant) {
echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>";
echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>";
echo "<td data-title='Name'>" . $orgs->org_name . "</td>";
echo "<td data-title='Sub Orgs' class='text-center'></td>";
echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>";
echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>";
echo "<td data-title='Compliance' class='text-center'></td>";
echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>";
echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>";
echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>";
echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
</div>
What am I doing wrong?

When you delegate to a child element you need to use e.stopImmediatePropigation()
Jquery uses it's own event system and this will stop any execution on the elements delegated to from the parent. e.stopPropigation() will allow all events delegated from the same parent to fire
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
})

Javascript popup only showing the last result in PHP query

I have the following block of code and I'm not sure how to do what I'm wanting to do.
In essence I'm wanting the javascript popup to display that row's value, but (obviously) it's only showing the final row of data as the popup isn't set for each row but rather calls the variable when clicked.
Any help would be appreciated!
<?php
$result = mysql_query("SELECT hr_overtime.overtime_id, hr_user.name, hr_overtime.overtime_date, hr_overtime.overtime_type, hr_overtime.overtime_from, hr_overtime.overtime_to, hr_overtime.overtime_amount, hr_overtime.details
FROM hr_overtime
inner join hr_user
on hr_user.user_id = hr_overtime.user_id
where hr_overtime.overtime_status = 'Pending' order by hr_overtime.overtime_date ASC");
echo "
<table border='0'>
<tr>
<th class='tablecell_header'>Consultant</th>
<th class='tablecell_header'>Date</th>
<th class='tablecell_header'>Type</th>
<th class='tablecell_header'>From</th>
<th class='tablecell_header'>To</th>
<th class='tablecell_header'>Amount</th>
<th> </th>
<th> </th>
<th> </th>
</tr>";
while($row = mysql_fetch_array($result))
{
$work = $row['details'];
echo "<tr>";
echo "<td class='tablecell'>" . $row['name'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_date'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_type'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_from'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_to'] . "</td>";
echo "<td class='tablecell'>" . $row['overtime_amount'] . "</td>";?>
<td class='tablecell'> <button onclick="myFunction()">Show work</button> </td><script>
function myFunction()
{
alert("<?php echo $work;?>");
}
</script>
<?php
echo "<td valign='middle'><form action='manager_overtime_approve.php' method='post'>
<input name='approve_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='APPROVE' id='edit' />
</form></td>";
echo "<td valign='middle'><form action='manager_overtime_reject.php' method='post'>
<input name='cancel_id' type='hidden' value='" . $row['overtime_id'] . "' />
<input type='submit' value='REJECT' id='edit' />
</form></td>";
echo "</tr>";
}
echo "</table>";
?>

There is no need for a separate function which you are using incorrectly. You can simply use an inline alert for this:
<td class='tablecell'> <button onclick="alert('<?php echo $work;?>');">Show work</button>

You can't insert the declaration of myFunction() inside your foreach loop, that way you are overriding for each entry the behaviour showed thus it's only working for the last row.
one fast solution would be to insert the whole $work variable as an argument of your onclick function eg.
<td class='tablecell'> <button onclick="myFunction('<?php echo $work ?>')">Show work</button>
and then outside of the foreach loop you can define myFunction such as:
function myFunction(details){
alert(details)
}

I think, in result HTML you have a multiple definitions of myFunction() and javascript uses only last one. You can use a HTML tag attributes to show right information.

try this
$work .= $row['details'];
and set javascript out of the loop
good luck

That's because myFunction is a Javascript function, which is defined once and doesn not share the same scope as PHP. So $work hold just the last value.
I'd suggest something like this:
echo "<tr data-detail-value='$work'>";
...
<td class='tablecell'> <button onclick="myFunction(this)">Show work</button>
...
function myFunction(btn) {
alert(btn.parentNode.parentNode.getAttribute("data-detail-value"));
}

Toggle the display of a table echod from php in Jquery

I have a table created in php that contains rows of customer information, with an additional row containing notes about each customer.
I would like a button above the table that when clicked will show or hide the notes row of each customer. So far my code doesn't seem to produce anything, I create the table here:
echo "<table id='listTable' border='1' cellpadding='10' class='listTable'>";
echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Company Name</th> <th>Telephone</th> <th>Alt/ Telephone</th> <th>Address </th> <th>Town</th> <th>Postcode</th> <th></th> <th></th> <th></th> <th></th></tr>";
// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++)
{
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) { break; }
// echo out the contents of each row into a table
echo "<tr class='main'>";
echo '<td>' . mysql_result($result, $i, 'id') . '</td>';
echo '<td>' . mysql_result($result, $i, 'First_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Surname') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Company_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Alt_Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'line_1') . '</td>';
echo '<td>' . mysql_result($result, $i, 'town') . '</td>';
echo '<td>' . mysql_result($result, $i, 'postcode') . '</td>';
echo '<td>View</td>';
echo '<td>Delete</td>';
echo '<td>archive</td>';
echo '<td>New Job</td>';
echo "</tr class='notes'>";
echo "<tr>";
echo '<td>' . mysql_result($result, $i, 'notes') . '</td>';
echo "</tr>";
}
// close table>
echo "</table>";
and Have the following Javascript at the top of my code
<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<head>
<title>View Records</title>
<script language="Javascript">
var rows = $('table.listTable tr.notes');
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
</script>
</head>
With the Toggle button created further down
<button id="showNotes">Toggle Notes</button>
When I click the button nothing is happening

You add class notes to close tag </tr>.
You have:
echo "</tr class='notes'>";
echo "<tr>";
Should be:
echo "</tr>";
echo "<tr class='notes'>";
And jQuery:
$(document).ready(function() {
$('#showNotes').click(function() {
$('#listTable tr.notes').toggle();
});
});
Now some remarks about your code:
Use mysqli_*, mysql_* is deprecated.
If you're using HTML in echo maybe try ' for it: echo '<tr class="notes">' looks better I think.
Use prepared statements: mysqli.prepare
Check this out (against your for loop): mysqli-stmt.fetch

Wrap the script in document ready function:
$(document).ready(function() {
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
});