I am making a website for a FiveM server. One of my pages on my website is CityLife.php. It will have a photo gallery of thumbnail images that when clicked opens up to the full size image in another window. I also want to use filters on the gallery by means of drop down menus. The first being categories which are populated with a separate PHP file that gets the folder names of the subdirectories inside of /Images/PhotoGalley/Thumbnails.
This populates the 1st drop down menu dynamically by the folder name and is working just fine.
//CityLife.php
<div class="DDM1">
<?php
echo '<form method="post" action="DDM2.php">';
echo "<label for= thumbnails>Categories:</label>";
include "DDM1.php";
?>
</form>
//DDM1.php
<?php
// Define the path to the 'Thumbnails' folder
$directoryPath = 'Images/PhotoGallery/Thumbnails';
// Scan the directory and get all items
$items = scandir($directoryPath);
// Filter out the '.' and '..' entries and only keep directories
$subdirectories = array_filter($items, function($item) use ($directoryPath) {
return is_dir($directoryPath . '/' . $item) && $item != '.' && $item != '..';
});
// Sort the subdirectories (optional, if you want them in a specific order)
sort($subdirectories);
// Output the dropdown menu
echo '<select name="thumbnails" id="thumbnails">';
foreach ($subdirectories as $subdirectory) {
echo '<option value="' . htmlspecialchars($subdirectory) . '">' . htmlspecialchars($subdirectory) . '</option>';
}
echo '</select>';
?>
The problem comes when trying to populate the 2nd menu. I have this code to attempt to do that. Intially it uses JS and Ajax to transfer the value to variable $selected_category. I then tried to use that variable as part of a filepath Images/PhotoGallery/Thumbnails/$selected_category as the $directorypath of another scandir() to get the sub-directories names in that category’s folder. Using those name to populated the 2nd drop down menu.
This is the code that i cant see to figure out what i am doing wrong with after populating the first menu i use:
//CityLife.php
<div class="DDM1">
<?php
echo '<form method="post" action="DDM2.php">';
echo "<label for= thumbnails>Categories:</label>";
include "DDM1.php";
?>
</form>
//endof 1 menu just shown for reference//
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// When the user changes the select element
$('#thumbnails').change(function() {
var selectedCategory = $(this).val(); // Get the selected value
// Send the value to DDM2.php using AJAX
$.ajax({
url: 'DDM2.php', // The PHP page that will handle the data
type: 'POST', // Send a POST request
data: { selected_category: selectedCategory }, // Send the selected value as 'selected_category'
success: function(response) {
// Handle the response from DDM2.php
console.log(response); // Print out the response from DDM2.php (if any)
},
error: function(xhr, status, error) {
// Handle any errors
console.error('AJAX request failed: ' + error);
}
});
});
});
</script>
</div>
</td>
<td>
<div> <img src="Images/logo.png" alt="logo" width="100px" height="100px"></div>
</td>
<td >
<divclass="DDM2'>
<?php
echo '<form method="post" action="photo_gallery.php">';
echo '<label for="SubCategory">Sub Category</label>';
include 'DDM2.php';
?>
</form>
//DDM2.php
<?php
// Check if the form is submitted via POST and if 'selected_category' is set
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Check if the selected_category is set and not empty
if (isset($_POST['selected_category']) && !empty($_POST['selected_category'])) {
$selected_category = $_POST['selected_category']; // Get the value from the POST request
// Define the path to the 'Thumbnails' folder
$directoryPath1 = 'Images/PhotoGallery/Thumbnails/$selected_category';
// Scan the directory and get all items
$items = scandir($directoryPath1);
// Filter out the '.' and '..' entries and only keep directories
$subdirectories = array_filter($items, function($item) use ($directoryPath1) {
return is_dir($directoryPath1 . '/' . $item) && $item != '.' && $item != '..';
});
// Sort the subdirectories (optional, if you want them in a specific order)
sort($subdirectories);
// Output the dropdown menu
echo '<select name="SubCategory" id="SubCategory">';
foreach ($subdirectories as $subdirectory) {
echo '<option value="' . htmlspecialchars($subdirectory) . '">' . htmlspecialchars($subdirectory) . '</option>';
}
echo '</select>';
}
}
?>
I hope this makes more sense to someone smarter than me and can show me where i am going wrong. I have spent almost 2 full days trying to figure this out on my own and i just can’t see it. I appreciate anyone who takes the time to help and thank you in advance.
I have tried using my database which is mysql and my site is being hosted on a web hosting site with access to php enabled and a mysql database.
