Each of the cells in the table below, generated by php/mysql (cells generated by a loop through dates foreach employee. Each cell is clickable other than the headings.
When the user clicks on a cell I want a dropdown box to appear with a number of options which depending on whether the cell has a shift in it or not.
At the moment if I click an empty cell on any employees row it will open the dropdown in the first employee's first empty cell.
How can I name or identify these drop down lists in a dynamic way so that the javascript function will open the correct dropdown for the correct cell?
I know that use of an array/list would be most appropriate, but can't figure out how get js to identify it.
The complete code for the timetable at the bottom will put:
echo "<td onclick='myFunction()' class='dropbtn'>";
echo "<div class='dropdown'>";
echo "<div id='dropdown' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
echo "</td>;
As each empty cell on an employee's row (not the unassigned ones).
Javascript:
function myFunction() {
document.getElementById("dropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
PHP to generate timetable
$week = $_POST['week'];
$year = $_POST['y'];
for($i=0;$i<7;$i++){
$gendates = new DateTime();
$gendates->setISODate($year,$week,1 + $i);
$datesarray[$i] = $gendates->format('Y-m-d');
}
echo "<table class='editweektable'><tr>";
echo "<th>Employee</th>";
foreach($datesarray as $key => $date){
echo "<th>".date("D", strtotime($date))."<br>".date("d-m", strtotime($date))."</th>";
}
echo "</tr>";
$getunassigned->execute();
while($row = $getunassigned->fetch(PDO::FETCH_ASSOC)){
echo "<tr><td>Unassigned</td>";
foreach($datesarray as $key => $date){
echo "<td>";
if($row['date'] == $date){
echo date("H:i", strtotime($row['starttime']))." - ".date("H:i", strtotime($row['finishtime']));
} else {
//empty cell
}
echo "</td>";
}
echo "</tr>";
}
$getemployees->execute();
while($row1 = $getemployees->fetch(PDO::FETCH_ASSOC)){
echo "<tr><td>".$row1['fname']." ".$row1['lname']."</td>";
foreach($datesarray as $key => $date){
echo "<td onclick='myFunction()' class='dropbtn'>";
$eid = $row1['eid'];
$getemployeeshifts->execute();
$row2 = $getemployeeshifts->fetch(PDO::FETCH_ASSOC);
$count = $getemployeeshifts->rowCount();
if($count == 0){
echo "<div class='dropdown'>";
echo "<div id='myDropdown' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
} else {
echo date("H:i", strtotime($row2['starttime']))." - ".date("H:i", strtotime($row2['finishtime']));
}
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
I changed the id of the dynamically generated dropdowns to something related to the cell (date and employee)
echo "<div class='dropdown'>";
echo "<div id='MyDropdown".$eid.$date."' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
And then javascript
function myFunction(eid, date) {
document.getElementById("MyDropdown"+eid+date).classList.toggle("show");
}
Never duplicate the id of a element and to solve the reference of the DOM element you can pass this to the function :)
Update: added online example: https://jsfiddle.net/gdn5mfvo/
Example table, dont duplicate id
<table style="width:500px">
<tr>
<td onclick='myFunction(this)' class='dropbtn'>
<div class='dropdown hide'>
<div id='myDropdown1' class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
click here
</td>
<td onclick='myFunction(this)' class='dropbtn'>
<div class='dropdown hide'>
<div id='myDropdown2' class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
click here
</td>
</tr>
</table>
Example JS
<script>
function myFunction(elem) {
// elem points to the td clicked
// elem.firstChild.nextSibling refernce to <div class='dropdown hide'> of the clicked td
console.log(elem.firstChild.nextSibling.classList.toggle('hide'));
}
</script>
Example css
<style>
table, th, td {
border: 1px solid black;
height:10px;
}
.hide{
display:none;
}
</style>
Related
Can anyone suggest some alternative solution for this problem.
I've made a popup form which i use css and javascript to trigger the display to none or flex every time i click into a specific button which is great. But this method seems to not work on a table as you can see below i've done a simple query which i just fetch some of the essentials and included some buttons to use to trigger the popup form.
PHP/HTML CODE
<tbody>
<?php
$res=mysqli_query($link,"SELECT CONCAT(c.firstname, ' ', c.lastname) AS fullname, c.* FROM user_registration c");
while($row=mysqli_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <img src="<?php echo $row["image"]; ?>" height="100" width="100"> <?php echo "</td>";
echo "<td>"; echo $row["fullname"]; echo "</td>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">Accept</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-danger" style="width: 100%">Decline</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">View Message</button><?php echo "</td>";
echo "</tr>";
}
?>
</tbody>
JAVASCRIPT CODE
document.getElementById("declineB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "flex";
})
document.getElementById("closeDecB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "none";
})
When you have multiple elements with id declineB, document.getElementById("declineB") can actually only get the first element with id declineB. The effect you want will only appear when an element whose id is declineB. When click others, no click event will be triggered.
When you use css class, you can add click event to every html element of same class:
let elements = Array.from(document.getElementsByClassName('spacer'))
for (let element of elements) {
element.addEventListener('click', ...)
}
echo "<tbody";
echo "<tr>";
echo "<td>{$id}</td>";// display customer Id
echo "<td> {$firstname} {$lastname}</td>"; //display customer title,firstname,lastname
echo "<td>{$date->format('h:i A')}</td>";//display the time customer joined the queue
echo "<td><a href='#' onclick='delete_user({$id});'
class='btn btn-danger'>btn</a> ";// Delete Record Link
echo "<td><a href='#' onclick='delete_user2({$id});'
class='btn btn-danger'>btn</a> ";// Delete Record Link
echo "<td align='center'>" . '<input type="button" value="Accept" name="txtaccept" onclick="Accept(this)"> <input type="button" value="Reject" name="txtreject" onclick="Reject(this)">' . "</td>";
echo "</tr>";
echo "</tbody";
} // End while()
echo "</table>";
<style type="text/css">
table { border-collapse: collapse; } //to remove cell spacings
table td { padding: 2px; }
tr.accepted, tr.accepted td { background-color: green; }
tr.rejected, tr.rejected td { background-color: red; }
</style>
<script type="text/javascript">
function Accept(el)
{
var tr = el.parentNode.parentNode; //tr
tr.className = "accepted";
}
function Reject(el)
{
var tr = el.parentNode.parentNode; //tr
tr.className = "rejected";
}
</script>
Hello there is my code that works fine,to explain,when I click button accept it changes color to table row in green and clicking reject changes color to red,my problem is that when I refresh page results are refreshing too,How can I save this result I get by clicking these buttons? I am really new,Its silly question may be but you can save my day.
Put you logic when you printing row. For example:
Change
echo "<tr>";
To
echo "<tr ".($value ? ($value == 'accepted' ? "class='accepted'" : "class='rejected'") : "").">";
$value -> your column in database where you save if it is accepted or rejected.
How can I fix this? I have used php to display data from my database but I didn't foresee this bug.
When I click the gear icon both dropdown menu will appear. How can I fix this? What I want is when I click the gear of a specific project only one dropdown will appear. I hope you can help me its been bugging me for days. Thank you!!
Here is my code:
PHP CODE:
if ($level == "Level 1"){
$sql = "SELECT * FROM project";
$result = mysqli_query($conn,$sql);
$count = mysqli_num_rows($result);
if ($count > 0) {
while ($row = mysqli_fetch_array($result)) {
echo "<input type='hidden' id='".$row['project_id']."'>";
echo "<div class='col-3'>";
echo "<div class='card'>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<h6 class='card-title'>".$row['project_name']."</h6>";
echo "</div>";
echo "<div class='col-2'>";
echo "<div class='card-setting'><i class='fa fa-gear'></i></div>";
echo "<div id='card-setting-dropdown' class='card-dropdown-content'>";
echo "<button class='card-dropdown-menu' id='delete_project'>Delete Project</button>";
echo "<button class='card-dropdown-menu' id='add_task'>Add Task</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<label class='project-details'>".$row['department']."</label>";
echo "</div>";
echo "<div class='col-2'>";
echo "<label class='project-details' style='float:right;'>Priority: ".$row['priority']."</label>";
echo "</div>";
echo "</div>";
echo "<div class='pr-task-data'>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Tasks</label>";
echo "<p class='pr-task-details'>12</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Completed</label>";
echo "<p class='pr-task-details'>5</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>In-Progress</label>";
echo "<p class='pr-task-details'>2</p>";
echo "</div>";
echo "<div class='pr-task-summary-r'>";
echo "<label class='pr-task-title'>Not Completed</label>";
echo "<p class='pr-task-details'>5</p>";
echo "</div>";
echo "</div>";
echo "<div class='progress'>";
echo "<div class='progress-bar'>";
echo "<label class='progress-bar-percent'>50%</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
}
}
Script:
//Card-Settings Dropdown
$(".card-setting").click(function() {
$(".card-dropdown-content").toggleClass("card-dropdown-content-show");
$(this).toggleClass("card-setting-active");
});
When the script activates you toggle the class car-dropdown-content-show for all cards. You should only focus on the one inside the card and find the one with the card-dropdown-content class:
$(".card-setting").click(function() {
var $this = $(this);
$this.parent().find(".card-dropdown-content").toggleClass("card-dropdown-content-show");
$this.toggleClass("card-setting-active");
});
We first need to go up to the parent because the find looks through all the descendants, the div with the card-dropdown-content class is a sibling.
You need to find related element to clicked gear.
Try this:
$('.card-setting').on('click', function () {
var $this = $(this) ;
$this.next().toggleClass("card-dropdown-content-show");
$this.toggleClass("card-setting-active");
});
So I have a table that displays multiple rows (each row is from a table on the database)...I have a button (with id view) on each row which should open a modal with the complete form data.
This is my how I generate my table:
echo "<tbody id=\"tdata\">";
while($fetch= mysqli_stmt_fetch($stmt))
{
//$table .="<tbody>";
$table .="<tr data-id=\"$det_Id\" id=\"dat_Row\" >";
$table .="<td>".$i."</td>";
$table .="<td>".$title."</td>";
$table .="<td>".$date."</td>";
$table .="<td>".$status."</td>";
$table .="<td class=\"btn-group\" style=\"border:none\">";
//<div class="btn-group">
$table .="<button id=\"view\" data-id=\"$det_Id\" class=\" btn btn-primary \">"."View"."<span class=\" glyphicon glyphicon-expand\">"."</span>"."</button>";
/**$table .="<ul class=\"dropdown-menu\">";
$table .="<li>".""."View".""."</li>";
$table .="<li>".""."Comments".""."</li>";
$table .="</ul>";**/
//<!--</div>-->
$table .="</td>";
$table .="</tr>";
$i++;
}
echo $table;
echo "</tbody>";
echo "</table>";
echo "</div>";
//end of while
}
As u can see, I used the data-id attribute within each button.
This is how I make the modal appear:
<script>
$(document).ready(function(e) {
//Here, i am implementing a functionality that will show the user details of his/her submissions via the use of a modal
//get the form's unique identifier
$(" tbody #view").click(function(e) {
form_Id = $(this).attr("data-id");
$("#myModal").modal({
// backdrop:"static",
show: false,
remote:"./php/modalGet.php?form_Id="+form_Id
});
$("#myModal").modal('show');
$('#myModal').on('shown.bs.modal', function (){
//im trying to debug here
alert(form_Id);
});
//alert(form_Id);
});
});
</script>
getModal.php (This retrieves the form_Id from the remote method and prints out the form to be displayed on the modal)
<?
include("../inc/connect.php");
//retreive id from the remote method
$det_Id =$_GET["form_Id"];
// Setup Query
$query = "SELECT `title`,`aim`,`overview`,`no_of_part`,`selection`,`advice`,`risk_part`,`risk_res`,`consent`,`findings` FROM `tbl_SubDets` WHERE `det_Id`=? LIMIT 1";
// Get instance of statement
$stmt = mysqli_stmt_init($mysqli);
// Prepare Query
mysqli_stmt_prepare($stmt, $query);
// Bind Parameters [i for integer]
mysqli_stmt_bind_param($stmt,'i',$det_Id);
// if statement executes, bind the reult and printout table
if(mysqli_stmt_execute($stmt))
{
//alternative method: query parameters could be placed in an array and then "imploded" in here
mysqli_stmt_bind_result($stmt,$title,$aim,$overview,$no_of_part,$selection,$advice,$risk_part,$risk_res,$consent,$findings);
//echo "<form>";
// Fetch Value
while($fetch = mysqli_stmt_fetch($stmt))
{
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Aim of Project"."</label>";
echo "<textarea class=\"form-control\" id=\"aim\" name=\"aim\" >";
echo $aim;
echo "</textarea>";
echo "</div>";
//Overview
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<textarea class=\"form-control\" id=\"aim\" name=\"aim\" >";
echo $overview;
echo "</textarea>";
echo "</div>";
//num of participants
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<input type=\"number\" class=\"form-control\" value=\"$no_of_part\" >";
echo "</div>";
//selection
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $selection;
echo "</textarea>";
echo "</div>";
//advice
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Advice to Participants"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $advice;
echo "</textarea>";
echo "</div>";
//risk to participants
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Risk to participants"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $risk_part;
echo "</textarea>";
echo "</div>";
//Risk to researcher
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Risk to Researcher"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $risk_res;
echo "</textarea>";
echo "</div>";
//consent
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."How will Records of consent be changed"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $consent;
echo "</textarea>";
echo "</div>";
//findings
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."How will the findings of this research be disseminated?"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $findings;
echo "</textarea>";
echo "</div>";
}
mysqli_stmt_free_result($stmt);
// echo "</form>";
}
?>
This is the students page:
<section class="container" style="margin-top:150px">
<div class="row">
<div class=" col-md-4">
<ul class="list-group panel panel-primary">
<div class="panel-heading">Dashboard <span class="glyphicon glyphicon-dashboard "></span></div>
<li class=" list-group-item"><span class="glyphicon glyphicon-file"></span>Proposals Sent<span class="badge" id="total_Sent"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-minus-sign"></span>Pendiing Proposals<span class="badge" id="total_Pending"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-ok "></span>Proposals Accepted<span class="badge" id="total_Accepted"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-remove "></span>Proposals Rejected<span class="badge" id="total_Rejected"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-calendar"></span>Deadline<span class="badge" id="deadline"></span></li>
</ul>
</div><!--end of panel-->
<div class="col-md-8" id="table">
</div>
</div>
<div id="myModal" class="modal fade" role="dialog" ><!---->
<div class="modal-dialog">
<div class="modal-content">
<div id="subDets-Body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</section>
My problem:
Lets assume we have 3 rows (with data-id 1,2,3) I click on any button and the modal shows with data from that row but if I close the modal and click on another button from a different row, the modal appears but the data displayed is still from the previous click
So i am trying to display data in sql server using PHP. I am using a sortable library i found online and this is my code:
echo "<table id='report' class='sortable'>";
echo "<thead><tr>";
echo "<th>A</th>";
echo "<th>B</th>";
echo "<th>C</th>";
echo "<th>D</th>";
echo "<th>E</th>";
echo "<th>F</th>";
echo "<th>G</th>";
echo "<th>H</th>";
echo "<th>I</th>";
echo "</tr></thead>";
echo "<tbody>";
for($i=0; $i<$tablerows; $i++)
{
echo "<tr>";
echo "<td>".$result[$i]['A']."</td>";
echo "<td>".$result[$i]['B']."</td>";
echo "<td>".$result[$i]['C']."</td>";
echo "<td>".$result[$i]['D']."</td>";
echo "<td>".$result[$i]['E']."</td>";
echo "<td>".$result[$i]['F']."</td>";
echo "<td>".$result[$i]['G']."</td>";
echo "<td>".$result[$i]['H']."</td>";
echo "<td>".$result[$i]['I']."</td>";
echo "<td><div class='arrow'></div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='5'>";
echo "<div id='nestedAccordion'>";
echo "<h2>COLUMN 1 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 2 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 3 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 4 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 5 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
When my page is loaded, it can be sorted by the A-I headings in <th> tag. As you can see, in my 'for' loop my last tag has an arrow. I want that so if the user wants more information about the row, he can view that by clicking that arrow, and information that will be displayed is in: <td colspan='5'>
Here is the javascript/jquery:
$(document).ready(function () {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
var parentDivs = $('#nestedAccordion div'),
childDivs = $('#nestedAccordion h3').siblings('div');
$('#nestedAccordion h2').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function () {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
});
The question and the problem i have is only either sortable for table or arrow will work. When i load the page, and i click on the arrow to view more information i can view it, but if i sort afterward, the data under the arrow is taken as its own row rather than part of the row it was selected from.
If i sort at start, and then click on arrow, the row below is hidden. I think the problem is in this chunk of code:
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
Since the next tr is for colspan? But how do i fix it?