Toggle the display of a table echod from php in Jquery - javascript

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

Related

Ajax load: adding whole page again in the element

I have a listing page. by default I'm showing 10 rows of results. if the rows are greater than 10 I'm showing a load more. when the user clicks on the load more I want to show 10 more results. but when I click on the load more button it add the whole page again the table inside of rows. any suggestions?
Listing Page:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var job_count = 10;
$('#loadMoreJobs').click(function() {
job_count += 10;
$('#latestJobs').load('load_jobs.php', {
job_count: job_count
});
});
});
</script>
<tbody id="latestJobs">
<?php
$jobs = find_jobs_by_status('active', 10);
if (mysqli_num_rows($jobs) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($jobs)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
}
?>
</tbody>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>
Load More Rows Page:
<?php
require_once('includes/initialize.php');
if (isset($_POST['job_count'])) {
$job_count = $_POST['job_count'];
$result = find_jobs_by_status('active', $job_count);
if (mysqli_num_rows($result) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($result)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
mysqli_free_result($result);
}
} else {
redirect_to('jobs');
}
?>
If you do this in Listing Page then it would be better
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var job_count = 10;
$('#loadMoreJobs').click(function() {
job_count += 10;
$.ajax({
type: 'post',
url: 'load_jobs.php',
data: {
job_count:job_count
},
success: function (response) {
var content = document.getElementById("job_display");
content.innerHTML = response;
}
});
});
});
</script>
<tbody id="latestJobs">
<?php
$jobs = find_jobs_by_status('active', 10);
if (mysqli_num_rows($jobs) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($jobs)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
}
?>
</tbody>
<div id="job_display"></div>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>

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 pass PHP variable from a loop and use it as a Javascript variable

I have a while loop that displays some data into a table from a mysql table. Each table row has a button that is used to send data via ajax to another php page that insert the data into another table. My problem is that I want to get the values of specific rows by getting their ids but because I'm outside of the loop, I'm not able to the $row variable... How can I do such a thing?
Here is the portion of the code:
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['TROUBLE_TICKET_NUM'] . "<input type=\"hidden\" name=\"billet".$row['TROUBLE_TICKET_NUM']."\" id=\"billet".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['TROUBLE_TICKET_NUM']."\"></td>";
echo "<td>" . $row['CONCAT(Year(activites.ACTIVITY_CREATE_DTM),month(activites.ACTIVITY_CREATE_DTM))'] . "</td>";
echo "<td>" . $row['CUSTOMER_NM'] . "</td>";
echo "<td>" . $row['DEFAULT_WORK_GROUP_CD'] . "</td>";
echo "<td>" . $row['ACTIVITY_OWNER_NM'] . "<input type=\"hidden\" name=\"id".$row['TROUBLE_TICKET_NUM']."\" id=\"id".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['ACTIVITY_OWNER_NM']."\"></td>";
echo "<td>" . $row['groupe'] . "</td>";
echo "<td>" . $row['Technicien'] . "<input type=\"hidden\" name=\"technicien".$row['TROUBLE_TICKET_NUM']."\" id=\"technicien".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['Technicien']."\"></td>";
echo "<td>
<label for=\"date". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Date:</strong></label>
<input type=\"text\" name=\"date". $row['TROUBLE_TICKET_NUM'] ."\" id=\"date". $row['TROUBLE_TICKET_NUM'] ."\" onClick=\"ds_sh(this);\" value=\"".date("Y-m-d")."\">
<label for=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Heure:</strong></label>
<input type=\"text\" class=\"timepicker\" name=\"heure". $row['TROUBLE_TICKET_NUM'] ."\" id=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"></td>
<td><button type=\"button\" class=\"btn btn-success btn-block\" name=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" id=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" onclick=\"insertData()\">Ajouter suivi</button>
<br>
<p id=\"message\"></p>
</td>";
echo "<tr>";
}
} else {
echo "<tr><td><div class=\"alert alert-dark\" role=\"alert\">Aucun résultat</div></td></tr>";
}
mysqli_close($conn);
?>
</tbody>
</table>
</div>
<!-- Script pour envoi donnée via ajax -->
<script type="text/javascript">
$(document).ready(function(){
$("#insert-data<?php echo $row['TROUBLE_TICKET_NUM']; ?>").click(function(){
var billet=$("#billet<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var technicien=$("#technicien<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var id=$("#id<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var date=$("#date<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var heure=$("#heure<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
// Debug
console.log(billet, technicien, tid, date, heure);
// AJAX
$.ajax({
method: "POST",
url: "insert-data.php",
data: {billet:billet,technicien:technicien,id:id,date:date,heure:heure},
dataType: "JSON",
success: function(data) {
$(".message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
});
});
</script>
If your intent is to allow the user to only insert values that come from existing rows, then don't pass the values you want to insert to the AJAX target. Otherwise, the user could manually call the AJAX target and simply provide any values they want. Instead, send the ID of the source row, and update the AJAX target to lookup that row and then copy the values from it.
You can do this by putting the row id into a data attribute for each row:
<tr data-id="<?= $row['id'] ?>">
Then use a jquery selector that fires on click of the button to get that value for the clicked row. Something like:
$(this).parent().data('id')

Dropdown clicked only selected rows

I have crated table with weather data using php and openweathermap. I would like to show only first row from each day. After clicking on selected row only content belonging within selected date is dropping down.
At this moment I have managed to create table with visible only first rows from each day and dropdown all hidden content at one moment.
How can I dropdown content belonging to chosen row section (date)?
My code to download data and create table:
<?php
date_default_timezone_set('Europe/Warsaw');
use Cmfcmf\OpenWeatherMap;
require __DIR__ . '/vendor/autoload.php';
$lang = 'pl';
$units = 'metric';
$owm = new OpenWeatherMap("MY_KEY");
$forecast = $owm->getWeatherForecast('Warszawa', $units, $lang, '', 3);
?>
<table class="pogoda">
<tr>
<th><?php echo "Data:"; ?></th>
<th><?php echo "Godzina:"; ?></th>
<th><?php echo "Temperatura: "; ?></th>
<th><?php echo "Ciśnienie: "; ?></th>
<th><?php echo "Wilgotność: "; ?></th>
<th><?php echo "Prędkość wiatru: "; ?></th>
<th><?php echo "Kierunek wiatru: "; ?></th>
<th><?php echo "Zachmurzenie: "; ?></th>
</tr>
<?php
$i = 0;
$j = NULL;
foreach ($forecast as $weather) {
if($j == $weather->time->day->format('d.m.Y')){
$i = 1;
}
if($i == 0){
echo '<tr class="dropdown">';
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
else{
echo '<tr class="dropdown-content">';
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
$j = $weather->time->day->format('d.m.Y');
}
?>
css:
tr.dropdown-content{
display: none;
}
js:
$(document).ready(function(){
$("tr.dropdown").click(function(){
$("tr.dropdown-content").slideToggle('fast');
});
});
I have simply changed the js code to:
$(document).ready(function(){
$("tr.dropdown").click(function(){
$(this).nextUntil('tr.dropdown').slideToggle('normal');
});
});
It solved the problem.

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.

Categories