A little bit of backstory and info about my knowledge of code:
I have been learning code for 2-3 years and I am currently working on a Web application with a classmate, and we are nearly done. I mainly did the HTML/CSS part and he mainly did the PHP/JavaScript part, so my knowledge is mostly HTML and CSS.
My problem:
My classmate has coded a system where certain 'badges' are in certain levels, and you can drag them around into different levels. These badges are retrieved from a database, and then made using some form of a loop that runs for every badge in the database. This happens with some HTML code in PHP. This part works fine.
Image of badges and levels here
Now comes my problem: I'm trying to create some form of a dropdown menu within each individual 'badge', but while the dropdown buttons appear in every 'badge', the dropdown content only appears near the first button. I don't know if it is the same content that is triggered by every button, or if it is different content that is appearing in the same spot for some reason. If someone could tell me what is exactly going wrong and how to fix it, that would be greatly appreciated. (we have to have our project finished on 5 or 6 febuary 2019).
Fourth dropdown button clicked
As you can see, it appears in the same spot yet different buttons are clicked.
Code used:
Main code consisting of HTML, PHP and JavaScript:
<!DOCTYPE html>
<head>
<title>Badges</title>
<link rel="stylesheet" href="main.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="BadgePage.js"></script>
</head>
<body style="margin:0">
<div id="container">
<div id="home">
<a href="workinprogress.html">
<button class="home-button">
<img src="img/MCC.png" width="200" height="60">
</button>
</a>
</div>
<div id="BP-link" class="nav">
<a href="Testing2.php"><button class="bpbutton">Badges</button></a>
</div>
<div id="lln_page" class="nav">
<a href="LeerlingenPage.php"><button class="llnpbutton">Leerlingen</button></a>
</div>
<div id="main">
<div class="main">
<?php
$link = mysqli_connect("localhost", "root", "", "badgedb");
$lev = 1;
$levAantal = 3;
for($lev;$lev<=$levAantal;$lev++){
echo '<div id="level' . $lev . '" class="levelID">';
echo '<p class="level">Level ' . $lev . '</p>';
echo '<ul class="itemList Level-' . $lev . ' ui-sortable" id="L' . $lev . '">';
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM badges";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
} else{
echo "No records matching your query were found.";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
while($row = mysqli_fetch_array($result)){
if($row['level'] == $lev){
echo " <li class='item'>
<link rel='stylesheet' href='side.css' />
<script type='text/javascript'>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById('myDropdown').classList.toggle('show');
}
// Close the dropdown menu if the user clicks outside of it
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');
}
}
}
}
</script>
<img src='img/" . $row['afbeelding'] . "' alt='Item Number " . $row['ID'] . "' class='itemImage' id='" . $row['ID'] . "'>
<div class='dropdown'>
<button onclick='myFunction()' class='dropbtn'>Dropdown</button>
<div id='myDropdown' class='dropdown-content'>
<button href='#'>Link 1</button>
<button href='#'>Link 2</button>
</div>
</div>
</li>";
}
}
echo "</ul>";
echo "</div>";
}
?>
<script type="text/javascript">
function onSubmit(){
var badgeID;
var Alpha = 1;
const search = $('.main > div.levelID > ul > li > img');
const badges = {};
const hrefDir = location.href.replace(/(^.*\/).*?$/, '$1'); // http://localhost/PWS/Testing2.php -> http://localhost/PWS/
for (const badge of search) {
const levelID = parseInt(badge.parentElement.parentElement.id.replace('L', ''));
if (badge.id){
badgeID = parseInt(badge.id);
}
else {
badgeID = 0;
}
const badgeImg = badge.src.replace(hrefDir + 'img/', '');
badges[Alpha] = {
level: levelID,
afbeelding: badgeImg,
ID: badgeID
}
Alpha++;
}
$.ajax('api/update-order.php', {
data: badges
});/*.done((data)=>{
console.log(data)
});
console.log(badges);/**/
alert("Data uploaded!");
}
</script>
<input type="button" onclick="onSubmit()" value="submitter">
<!-- <div class="optionsButton">
<div class="dropdown">
<button class="dropbtn"><img src="img/cogwheel.png" alt="opties" class="options"></button>
<div class="dropdown-content">
<p>YEET</p>
</div>
</div>
</div> -->
</div>
</div>
</div>
</body>
Main CSS document:
* {
box-sizing: border-box;
}
#myInput {
background-color: white;
width: 40%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-left: 30%;
}
#myTable {
border-collapse: collapse;
width: 80%;
border: 1px solid #ddd;
font-size: 18px;
margin: 0 auto;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
body {
margin: 0;
}
}
.dropbtn {
background-color: darkgray;
border-left: solid;
border-top: solid;
border-top-left-radius: 10px;
max-height: 10%;
max-width: 5%;
height: 100px;
width: 100px;
position: fixed;
bottom: 0px;
right: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 100%;
top: 0%;
background-color: darkgray;
width: auto;
}
.main {
height: 100%;
}
.options {
height: 100%;
width: 100%;
}
p.level {
width: inherit;
text-align: center;
background-color: gray;
color: white;
padding: 5px;
margin-top: 0;
font-size: 20px;
border-radius: 10px;
border: solid darkgray;
}
ul.itemList {
height: auto;
min-height: 50px;
}
.ui-sortable-handle {
width: auto;
}
li.item {
display: inline-block;
border: 1px black double;
background-color: lightgrey;
padding: auto;
padding-left: 1%;
padding-right: 1%;
margin-left: 0px;
}
img.itemImage {
height: 150px;
width: 150px;
}
button.bpbutton {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
button.bpbutton:hover {
background-color: #cc1c0e;
color: lightgray;
}
button.llnpbutton {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
button.llnpbutton:hover {
background-color: #cc1c0e;
color: lightgray;
}
button.home-button {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
#container {
display: grid;
grid-template-columns: 0fr 1fr 1fr;
grid-template-rows: 1fr 14fr;
grid-template-areas:"home BP-link lln_page"
"main"
}
#home {
background-color: #F44336;
padding-left: 10px;
border-right: dashed #f22615;
border-bottom: solid #f22615;
color: white;
padding-top: 1%;
}
#zoek {
background-color: #F44336;
border-right: dashed;
border-color: #f22615;
color: white;
text-align: center;
border-bottom: solid #f22615;
}
#BP-link {
background-color: #F44336;
color: white;
text-align: center;
border-bottom: solid #f22615;
border-right: dashed #f22615;
}
#lln_page {
background-color: #F44336;
color: white;
text-align: center;
border-bottom: solid #f22615;
}
#main {
background-color: lightgray;
width: 100%;
grid-column: 1 / end;
}
#workinprogress {
background-image: url(https://www.scansys.eu/scansysfld/uploads/2017/06/Work_In_Progress.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: lightgray;
width: 100%;
grid-column: 1 / end;
}
th, td, table {
border: 1px black solid;
border-collapse: collapse;
}
textarea.comment {
resize:none;
height:50px;
width:90%;
}
.buttonForSubmit {
text-align: center;
}
#submitButton {
height:50px;
width:60px;
}
CSS document specifically for the dropdown components:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #304870;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content button {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 100%;
}
.dropdown-content button:hover {background-color: #ddd}
.show {display:block;}
Image of Database, should you need it.
Thank you for reading, and I hope you or someone else can help us. Please tell me if you need anything else.
