Dropdown clicked only selected rows - javascript

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.

Related

How to send php Select box value?

The following code will output as shown in the attached picture.
Select the value of the Select box in test16 and press the "test19" button, the value of the Select box you want to modify.I want to make the value delivered to php.
I want to know how to deliver the value of the select box in php and how to receive the value delivered.
<?php
if($result = mysqli_query($link, $sql)){
$test = 'test';
if(mysqli_num_rows($result) > 0){
echo "<table id='datatable1' class = table style = 'width: 100%; background-color:#dee2e6'>";
echo "<thead >";
echo "<tr>";
echo "<th>No</th>";
echo "<th>test1</th>";
echo "<th>test2</th>";
echo "<th>test3</th>";
echo "<th>test4</th>";
echo "<th>test5</th>";
echo "<th>test6</th>";
echo "<th>test7</th>";
echo "<th>test8</th>";
echo "<th>test9</th>";
echo "<th>test10</th>";
echo "<th>test11</th>";
echo "<th>test12</th>";
echo "<th>test13</th>";
echo "<th>test14</th>";
echo "<th>test15</th>";
echo "<th>test16</th>";
echo "<th>test17</th>";
echo "<th>test18</th>";
echo "<th>test19</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['chart_num'] . "</td>";
echo "<td>" . $row['chart_name'] . "</td>";
echo "<td>" . $row['visit'] . "</td>";
echo "<td>" . number_format($row['total_medical_bills']) . "</td>";
echo "<td>" . number_format($row['total_amount']) . "</td>";
echo "<td>" . number_format($row['amount_asked']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['medical_bills_payment']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['personal_liability_amount']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['non_payment']) . "</td>";
echo "<td>" . $row['insurance_division'] . "</td>";
echo "<td>" . $row['division'] . "</td>";
echo "<td>" . number_format($row['cash_amount_received']) . "</td>";
echo "<td>" . number_format($row['card_amount_received']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['treatment_fees_difference']) . "</td>";
echo "<td>" . $row['treatment_fees_check_division'] . "</td>";
echo "<td><select name='". $test ."'>";
echo "<option value='". $test ."'>First</option>";
echo "<option value='". $test ."'>Second</option>";
echo "<option value='". $test ."'>Third</option>";
echo "</select></td>";
echo "<td>" . $row['treatment_fees_check'] . "</td>";
echo "<td>" . $row['treatment_fees_check_modify'] . "</td>";
echo "<td>";
if($row['medical_bills_payment'] == $row['personal_liability_amount'] + $row['non_payment']){
echo "수정불가";
}
else{
echo "<a href='treatment_fees_check_update.php?id=". $row['id'] ." title='수정' data-toggle='tooltip'><span class='icon ion-edit'></span></a>";
}
echo "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_free_result($result);
}
}
else{
echo "ERROR: Could not able to execute $sql2. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
Since you can have a lot of select boxes, you will need give them an ID so we can reference the respective field. Let's add/change your code as below:
$rowCount=0;
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
...
echo "<td><select id='MySelect".$rowCount."' name='". $test ."'>";
echo "<option value='". $test ."'>First</option>";
echo "<option value='". $test ."'>Second</option>";
echo "<option value='". $test ."'>Third</option>";
echo "</select></td>";
...
echo "<td>";
if($row['medical_bills_payment'] == $row['personal_liability_amount'] + $row['non_payment']){
echo "수정불가";
}
else{
echo '<span class="icon ion-edit"></span>';
}
echo "</td>";
$rowCount++;
EDIT: I missed to add $rowCount++; before close while block. Sorry.
At the end of your document, before close body tag you add:
<script>
function GetMySelectValue(select,objId){
document.location.href= "yoursite.com/treatment_fees_check_update.php?id="+objId+"&myselect="+document.getElementById(select).value;
}
</script>
In treatment_fees_check_update.php you get id and select value:
$rowid=$_GET['id'];
$myselect=$_GET['myselect'];
Hope it can help you.
The principles for what you need is to asign a id to each one of the options in the dropdown, so you can send the id of tha specific value, compare with that same id in the database if exists then you will have the column with the value that you need to modify in the database, but first bring and add the proper id of each one of the options in the select.

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.

Message box and query is executed but changes do not reflect in the database

Whenever I press the enable or disable button, the messagebox is generated meaning the query has executed but changes are not reflected in the database and the query when executed seperately in phpmyadmin reflects the result into the database. I even tried outputing the mysqli_error() function but that is also not giving back any errors.
<!doctype html>
<html>
<?php include'abcadmin.css' ?>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><h1></h1></center>
<form action="" method="POST">
<center><h4><b>Student Edit & Account Management</b></h4></center> <br>
<center><h4>SAP ID: <input type="text" name="search"><br /></h4> </center>
<center><input type="submit" value="Search" name="submit" /> </center><br>
</form>
<br>
<?php
session_start();
global $a,$search,$b;
$con=mysqli_connect('localhost','root','') or die(mysql_error());
mysqli_select_db($con,'sophomore') or die("cannot select DB");
if(isset($_POST["submit"]))
{
$search=$_POST['search'];
$query=mysqli_query($con,"SELECT * FROM student_registration WHERE sap_id='".$search."'");
$numrows=mysqli_num_rows($query);
if($numrows>0)
{
if(!empty($_POST['search']))
{
if($numrows!=0)
while($row=mysqli_fetch_assoc($query))
{
{
$stuname=$row['fname'];
$stusurname=$row['lname'];
$stusapid=$row['sap_id'];
$studob=$row['dob'];
$stuage=$row['age'];
$stucourse=$row['course'];
$stusemester=$row['semester'];
$stustatus=$row['status'];
$_SESSION['adminstusapid']=$stusapid;
}
}
}
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Name: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stuname;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Surname: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusurname;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "SAP ID: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusapid;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "DOB: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $studob;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Age: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stuage;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Course: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stucourse;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Semester: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusemester;
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</h4>';
echo '<br>';
echo '<form method="post">';
echo '<center>';
echo '<input type="submit" value="Enable" name="enabled">';
echo '&nbsp';
echo '&nbsp';
echo '<input type="submit" value="Disable" name="disabled">';
echo '</center>';
echo '</form>';
}
else
{
echo "<script type='text/javascript'>alert('No results found!!')</script>";
}
}
$a=0;
$b=1;
if(isset($_POST["enabled"])){
$sqla="UPDATE student_registration SET status='$stucourse' WHERE sap_id='".$search."'";
if(mysqli_query($con, $sqla)){
echo "<script type='text/javascript'>alert('The account has been enabled!!')</script>";
}
else
{
}
}
else
{
}
if(isset($_POST["disabled"])){
$sqlb="UPDATE student_registration SET status='$b' WHERE sap_id='".$search."'";
if(mysqli_query($con, $sqlb)){
echo "<script type='text/javascript'>alert('The account has been disabled!!')</script>";
}
else
{
}
}
else
{
}

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

Categories