Three common input values are make, model, and year, which would be provided to the server to retrieve an object containing the details for display on the page. This information is parsed using JavaScript to update the user interface.
On the Django side, there must be functionality to process the inputs and generate the output. From the client side, the ability to send the inputs to the server and interpret the response is crucial.
A recommended REST api framework for Django is Piston, which simplifies adding the mentioned "api." By setting up a URL for the resource and configuring a handler, you can easily implement this functionality.
urls.py:
vehicle_details = Resource(handler=VehicleDetails)
url(r'^vehicle/(?<make>.*)/(?<model>.*)/(?<year\d{2,4}/(?P<emitter_format>[a-z]{1,4}), vehicle_details, name='vehicle_details'),
handler.py:
class VehicleDetails(BaseHandler):
methods_allowed = ('GET',)
model = Vehicles #your Django vehicle model
def read(self, request, *args, **kwargs):
# query the DB and select options
# self.model.objects.filter()...
# Return custom object
return custom_object
This setup allows www.yoursite.com/vehicle/[make]/[model]/[year]/json to provide a custom data object in JSON format for parsing with jQuery.
Client-side functionality could involve using jQuery events to trigger requests to the API URL when all input values are selected. The JSON response can then be parsed and used to populate additional dropdown menus.
(Note: The code provided here serves as a general concept and may require adjustments before implementation.)
<script type="text/javascript">
$(function() {
$('#dropdown_make').bind('change', checkForValues());
$('#dropdown_model').bind('change', checkForValues());
$('#dropdown_year').bind('change', checkForValues());
});
function checkForValues() {
if ($('#dropdown_make').val() && $('#dropdown_model').val() && $('#dropdown_year').val())
updateOptions();
}
function updateOptions() {
url = '/vehicle/';
url += $('#dropdown_make').val() + '/';
url += $('#dropdown_model').val() + '/';
url += $('#dropdown_year').val() + '/';
url += 'json/';
$.get(url, function(){
// Custom data object returned here
})
}
</script>