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
Related
I have a table with datatables. When you click a row it opens a modal to edit that row. In the model there is a field wit a colorpicker. (col2)
The problem I have is that the colorpicker only works when clicking on the first row of the table.
I think a solution would be to have a variable field name, but does not know how to implement this.
here the code of my modal that opens when clicking a row in the table:
echo "<div class='modal fade' id='ModalEdit".$locations['id']."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>";
echo "<div class='modal-dialog' role='document'>";
echo "<div class='modal-content'>";
echo "<form class='form-horizontal' method='POST' action='editLocation.php'>";
echo "<div class='modal-header'>";
echo"<h4 class='modal-title' id='myModalLabel' >Locatie bewerken</h4>";
echo "</div>";
echo "<div class='modal-body'> ";
echo "<div class='form-group'> ";
echo "<label for='titel' class='col-sm-2 control-label'>Locatie</label>";
echo "<input type='text' name='locatie' class='form-control' id='locatie' value='".$locations['locatie']."' >";
echo "</div>";
echo "<div class='form-group'>";
echo "<label for='detailtitel' class='col-sm-2 control-label'>Color</label>";
echo "<input type='col2' class='form-control' id = 'col2' name='col2' value='".$locations['color']."' >";
echo "</div>";
echo"<div class='form-group'>";
echo"<input type='hidden' name='id' class='form-control' id='id' value='".$locations['id']."'>";
echo" </div>";
echo"</div>";
echo"<div class='modal-footer'>";
echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo"<button type='submit' class='btn btn-primary'>Save changes</button>";
echo" </div>";
echo"</form>";
echo"</div>";
echo"</div>";
echo"</div>";
And the script to load the colorpicker:
$(function () {
$('#col2').colorpicker({
format: 'hex'
});
});
Change ID to Class
ID is a Unique
echo "<input type='col2' class='form-control colorpicker' id = '' name='col2' value='".$locations['color']."' >";
$(function () {
$('.colorpicker').colorpicker({
format: 'hex'
});
});
or
Recall colorpicker function on bootstrap show modal event
I will insert new boostrap card inside my page. My problem, I have not success to include a new card inside my content.
When i click on insert, the card is not displayed
Below the code
display a new boostrap card if record exist
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<?php
$i = 0;
while ($QoptionValue->fetch()) {
.....
?>
<li class="col-md-4" id="element'<?php echo $i; ?>">
<div class="card">
<h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
<div class="card-body">
<div class="card-text">
<div><?php ..... ?></div>
</div>
</div>
</li>
<?php
$i++;
}
?>
</ul>
</div>
Display a new card or first card inside the content
<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';
for ($l=0, $n=count($languages); $l<$n; $l++) {
$card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
$card .= HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}
$card .= '</div>';
$card .= '<div>';
$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>
<script>
$('#insert').click(function(){
$( "ul#list" ).append( "<?php echo $card; ?>" );
});
</script>
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
console error
it seems on this line has a problem :
$( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");
Uncaught SyntaxError: missing ) after argument list
It's good practice to pass any PHP variable to javascript using json_encode(). Using json_encode() you'll always get a properly formatted JavaScript object with the quotes escaped.
<script>
$('#insert').click(function(){
$( "ul#list" ).append(<?php echo json_encode($card); ?>);
});
</script>
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");
});
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 edit the modal will appear However, when I click the edit button of the other data the modal will not appear. How can I fix this? What I want is when I click the edit button modal will appear. I hope you can help me its been bugging me for days.
Edit Button.
Please See Modal.
Here is my code:
PHP:
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='btn-edit'>Edit Project</button>";
echo "<button class='card-dropdown-menu'>Delete Project</button>";
echo "<button class='card-dropdown-menu'>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: <span style='color:".$color."'>".$row['priority']."</span></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'>".$count_2."</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Completed</label>";
echo "<p class='pr-task-details'>".$count_3."</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'>".$count_4."</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'>".$count_5."</p>";
echo "</div>";
echo "</div>";
echo "<div class='progress'>";
echo "<div class='progress-bar' style='width:".$percent."%;'>";
echo "<label class='progress-bar-percent'>".$percent."%</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div id='modal_2' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h6 class='modal-title'>Add Project</h6>";
echo "<button type='button' class='close_2'>x</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<form autocomplete='off' method='POST'>";
echo "<input type='hidden' id='".$row['project_id']."'>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Program</label>";
echo "<input type='text' placeholder='Program' name='program' id='program_2' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Project Name</label>";
echo "<input type='text' placeholder='Project Name' name='pname' id='pname' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Project Description</label>";
echo "<input type='text' placeholder='Description' name='description' id='description' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Department</label>";
echo "<select class='form-control' id='department' name='department'>";
echo "<option value=''>Department</option>";
echo "<option value='Executive Department'>Executive Department</option>";
echo "<option value='CCA Department'>CCA Department</option>";
echo "</select>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Priority</label>";
echo "<select class='form-control' id='priority' name='priority'>";
echo "<option value=''>Priority</option>";
echo "<option value='Low'>Low</option>";
echo "<option value='Medium'>Medium</option>";
echo "<option valie='High'>High</option>";
echo "<option valie='High'>High</option>";
echo "</select>";
echo "</div>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='submit' class='btn btn-update' name='update'>Update</button>";
echo "<button type='button' class='btn btn-secondary'>Close</button>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "</div>";
SCRIPT:
//Edit Project Modal
var modal_edit = document.getElementById('modal_2');
var btn_edit = document.getElementById("btn-edit");
var span_edit = document.getElementsByClassName("close_2")[0];
btn_edit.onclick = function() {
$(modal_edit).toggleClass("modal-show");
}
span_edit.onclick = function() {
$(modal_edit).removeClass("modal-show");
}
$(".btn-secondary").click(function() {
$(modal_edit).removeClass("modal-show");
});
Try something like this.
Add a common class to your edit button Like class="btnEdit other_classes"
Try this code
var modal_edit = document.getElementById('modal_2');
var span_edit = document.getElementsByClassName("close_2")[0];
// I assumed that your button is added dynamically
$(document).on('click',".btnEdit",function(){
$(modal_edit).toggleClass("modal-show");
});
span_edit.onclick = function() {
$(modal_edit).removeClass("modal-show");
}
$(".btn-secondary").click(function() {
$(modal_edit).removeClass("modal-show");
});
Your Click is not working for other elements because you are using id to assign events with them but and id must be unique. I made sample fiddle with two elements with the same ID's and try to look at their difference..
$("#first").click(function(){
alert("I was clicked");
});
div{
display:inline-block;
width:100px;
height:100px;
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">DIV</div>
<div id="first">DIV</div>
The first one only works.. So use class instead..
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>