I have a gallery on my site that needs to change when a user selects an option from the dropdown menu (the options represent locations).
At present I have the following two options:
<select class="form-control" id="photomenu">
<option value="Beckmouth Area">Beckmouth Area</option>
<option value="Barras Square area">Barras Square area</option>
</select>
My Jquery selects the chosen value and sends it to my AJAX request like so:
<script>
$(document).ready(function () {
$("#photomenu").change(function(){
var option = $("#photomenu option:selected").val();
var url = "access_database.php";
$.post(url, option, function(data)
{
$("#staithes_gallery").html(data)
});
});
});
</script>
My access_database.php
looks like:
<?php
$folder_location = $_GET["option"];
$path = "photos_staithes/Thumbnails/";
//connect to staithesbooks table
$servername = "localhost";
$username = "***********";
$password = "***********";
$dbname = "*********";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql_select_photo = "SELECT * FROM `staithesphotos` WHERE `folder` = '$folder_location'";
$results = $conn->query($sql_select_photo);
if ($results->num_rows > 0) {
// output data of each row
while($row = $results->fetch_assoc()) {
//create a list of all names and folder locations
$name[] = $row["name"];
}
//create the photo gallery
for ($x=0; $x<count($name); $x++)
{
$photo_gallery .= "<div class='col-md-4 work-grid animated wow slideInLeft'>
<a href='$path$folder_lcation$name[$x]' data-lightbox='featured' data-title='' style='cursor:pointer'><div class='item'>
<img src='$path$folder_location/$name[$x]' height='431' width='594' title='name' />
<div class='caption' style='display: none;'>
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</a></div>";
}
};
echo $photo_gallery;
?>
I have tested that the PHP
works by providing a static file location for $folder_location
.
Upon execution of the AJAX call
I wish to update the html within #staithes_gallery
with the new gallery.
Through testing and outputting the result to an alert box I simply receive object Object. I'm unsure what I am doing wrong.
Any help would be greatly appreciated!
Ok, I have it working.
I had to use .html() and not .val()
Thanks!