PHP table pass to a var in javascript - javascript

I have this PHP code and I am trying to alert a table that receives its values via sql.
Here's my code:
<script src="jquery.min.js">
</script>
<script>
function bus(x){
alert("Row index is: " + x.value);
}
</script>
$sql="SELECT ID, NOME, CPF FROM cadastro WHERE NOME LIKE '%" . $name . "%'";
$result=mysqli_query($conn,$sql);
while($row=mysqli_fetch_array($result)){
$ID =$row['ID'];
$NOME=$row['NOME'];
$CPF=$row['CPF'];
echo '<table style="width:100%">';
echo "<tr>";
echo "<th> ID </th>";
echo "<th> NOME </th>";
echo "<th> CPF </th>";
echo "</tr>";
echo '<tr style="cursor: pointer;">';
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $ID . "</td>";
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $NOME . "</td>";
echo "<td onclick='bus(" . $ID . )' class='tab'>" . $CPF . "</td>";
echo "</tr>";
echo "</table>";
I need to get the value from the table and serve it to a javascript function.

If x is a Number, then x.value will give you undefined and you should just use:
alert("Row index is: " + x);
To get the value of the column, you could pass this to the function instead of the id and then get the innerHTML:
<td onclick="bus(this)" class="tab">column 1</td>
function bus(elm){
alert(elm.innerHTML);
}
function bus(elm) {
alert(elm.innerHTML);
}
<table>
<tr>
<td onclick="bus(this)" class="tab">column 1</td>
<td onclick="bus(this)" class="tab">column 2</td>
<td onclick="bus(this)" class="tab">column 3</td>
</tr>
</table>

You only have one error. onclick is passing the ID, so the following code will do exactly what you need:
<script>
function bus(x){
alert("Row index is: " + x);
}
</script>
I removed the .value from your javascript.
function bus(x){
alert("Value is " + x);
}
<table>
<tr>
<td onclick="bus(44)">44</td>
<td onclick="bus(44)">Lorem</td>
<td onclick="bus(44)">ipsum</td>
</tr>
</table>

In this case x is not an object, just a plain value so:
alert("Row index is: " + x);
gl, pb

Related

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.

How to use Javascript in a innerHTML inline css scenario?

I am new to html5 and php. I am wondering how to use javascript in the case of my written code.
I am outputting my database data in a table in HTML. I want the last to output a bit more to the right. But if I use inline css styling I am getting a parse error:
my code:
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('patientdb');
$query = "SELECT id, name, date, status FROM clients";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){ //looping through results
echo "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['name'] . "</td>
<td>" . $row['date'] . "</td>
<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> //my question is regarding this line!!!!
</tr>"; //$row['index'] the index here is a field name
}
mysql_close();
?>
</tbody>
</table>
My goal is to change the color of the output of the last <td> depending on wether the data my database according to this logic:
if (x > 60) {
echo: "orange output";
}elseif (x >50) {
echo: "red output";
}else{
echo: "green output";
}
****How can I use JS in my current case?****
EDIT: trying out solutions
<script>
$('#hoverTable td').css('background-color',function(){
var x = DATA FROM MY DATABASE;
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
});
</script>
Table code
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Naam Client</th>
<th>Laatste Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', ''); //The Blank string is the password
mysql_select_db('patientdb');
$query = "SELECT id, naam, datum, status FROM clients"; //You don't need a ; like you do in SQL
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$statusClass = 'class="green output"';
if($row['status'] > 60){
$statusClass = 'class="red output"';
}else if($row['status'] > 50){
$statusClass = 'class="orange output"';
}
echo
'<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle" style="color: grey; margin-left: 30%;" .$statusClass."></td>
</tr>';
}
mysql_close(); //Make sure to close out the database connection
?>
</tbody>
</table>
hello if you want to use in php and status is last "td" code can be like this:
while($row = mysql_fetch_array($result)){
$statusClass = 'green output';
if($row['status'] > 60){
$statusClass = 'red output';
}else if($row['status'] > 50){
$statusClass = 'orange output';
}
echo '<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle '.$statusClass.'" style="color: grey; margin-left: 30%;"></td>
</tr>'
}
make sure, that u have highest number in condition on first place, because if you use this code
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
and x is 65 it returns "orange output" instead of "red output" because first statement is true, x is greater than 50
and using jquery for this is simplest solution. comment above, only apply id for table instead of selector "table"
$("#hoverTable td")...
Straightforward , if you are using jQuery.
$('#hoverTable td:last-child').css('background-color',function(){
var x = /*your target argument*/;
if(x > 50){return 'orange '};
});
You can't break lines in PHP. Use this:
echo "<tr>".
"<td>" . $row['id'] . "</td> ".
"<td>" . $row['name'] . "</td> ".
"<td>" . $row['date'] . "</td>".
"<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> ".
"</tr>";
You need to concatenate the ends of each line, or use a heredoc.

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

Expand/Collapse table row Javascript works wrongly

I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.
$("td span.expand").click(function() {
$(this).parents("tr.main").nextUntil("tr.main"). toggle();
});
When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows.
How to invert this?
Here's part of code I use for table (I know, it's messy):
echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px">Nr.</th>
<th width="75px">Mašīnas numurs</th>
<th width="75px">Reģistrācijas numurs</th>
<th width="75px">Marka / Modelis</th>
<th width="75px">ID</th>
</tr>';
//Ieraksta datus tabulā
while($row = mysql_fetch_array($query))
{
echo "<tr class='main'>";
echo "<td width='30px'>" . $row['nr'] . "</td>";
echo "<td width='75px'>" . $row['numurs'] . "</td>";
echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['apzim'] . "</td>";
echo "</tr>";
echo "<tr class='hidden'>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";
Try using CSS in your file and include the following:
<style>
.expand
{
display:none;
}
</style>
I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.
You may need to use .hidden { display:none; } instead.

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

Categories