I'm building a review system web application. I have a page on which I have used a drop-down menu to filter data using ajax. This code is below:
index.php (View)
Select drop-down generated by each different location in the database
<select name="retreat_locations" onchange="filterRetreats(this.value)">
<option value="alllocations" selected="selected">All Locations</option>
<?php foreach ($this->locations as $location) {?>
<option value="<?=htmlentities($location->retreat_location);?>"><?=htmlentities($location->retreat_location);?> </option>
<?php }?>
</select>
Div which displays AJAX results
<div id="display-retreats">
</div>
When drop-down selection is made, this div loads the resposne from AJAX
The AJAX Script
This script gets the selected option of the dropdown, and passes it to index/getretreat in the controller of the application. The controller uses a method in the model of the application named getRetreatsByFilter($retreat_location).
<!-- AJAX.. -->
<script>
function filterRetreats(str) {
if (str == "") {
document.getElementById("display-retreats").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display-retreats").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "index/getretreat/" + str, true);
xmlhttp.send();
}
}
getRetreatsByFilter($retreat_location) (Model)
/**
* Get retreats AJAX request for sure with dropdown filter.
* @return array an array with several objects (the results)
* Ordered by most reviewed.
*/
public static function getRetreatsByFilter($retreat_loation)
{
$param = $retreat_loation;
$database = DatabaseFactory::getFactory()->getConnection();
if($param == "alllocations") {
$sql = "SELECT retreats.retreat_id,
AVG(review_total_rating) AS retreat_total_rating,
AVG(review_cost) AS total_review_cost,
retreat_logo,
retreat_name,
retreat_website,
retreat_facebook,
retreat_instagram,
retreat_verified,
retreat_location,
retreat_founded_in,
retreat_approved,
count(reviews.retreat_id) as retreat_number_of_reviews
FROM retreats
LEFT JOIN reviews
ON retreats.retreat_id = reviews.retreat_id
WHERE retreat_approved = 1
GROUP BY retreats.retreat_id
ORDER BY count(reviews.retreat_id) DESC";
$query = $database->prepare($sql);
$query->execute();
$results = $query->fetchAll();
return $results;
}
else {
$sql = "SELECT retreats.retreat_id,
AVG(review_total_rating) AS retreat_total_rating,
AVG(review_cost) AS total_review_cost,
retreat_logo,
retreat_name,
retreat_website,
retreat_facebook,
retreat_instagram,
retreat_verified,
retreat_location,
retreat_founded_in,
retreat_approved,
count(reviews.retreat_id) as retreat_number_of_reviews
FROM retreats
LEFT JOIN reviews
ON retreats.retreat_id = reviews.retreat_id
WHERE retreat_approved = 1
AND retreat_location = '".$retreat_loation."'
GROUP BY retreats.retreat_id
ORDER BY count(reviews.retreat_id) DESC";
$query = $database->prepare($sql);
$query->execute();
$results = $query->fetchAll();
return $results;
}
}
This data is then sent to the div on the index page:
<div id="display-retreats">
</div>
This all works as I want it to, the thing that I am really struggling with is how would I go about implementation ANOTHER select menu to filter the same set of data.. The select used at the moment is used to find location by selected drop-down value. I am trying to add another select menu to sort the data in order such as:
<label>Sort by:</label>
<select>
<option>Age</option>
<option>Rating</option>
<option>Cost</option>
</select>
whilst still knowing which location was selected in the first drop-down.
If anyone has any advice on how I could implement this it would be thoroughly appreciated.
I would recommend posting all required parameters within a single JSON request to the server (using Ajax).