How can this Django asynchronous json request be corrected? - json

Question

I have a simple form with the the following inputs:
type (radio) and parent (select)
Depending on the type selected, there should be different options for the select. So whenever type is selected, it should make the json request to get a list of parents based on the type.
So far what I have:
json request (in template page)
$.getJSON("{% url 'locations_by_type' %}", {type: type}, function(locations) {
var locations_select = $("select[name='parent']");
$.each(locations, function (index, value) {
locations_select.append($("<option/>", {
value: key,
text: value
}));
});
});
forms.py
class LocationForm(forms.Form):
LOCATION_TYPE_COICES = (
("country", "country"),
("state", "state"),
("county", "county"),
("town", "town"),
)
name = forms.CharField(max_length=45)
type = forms.ChoiceField(
choices=LOCATION_TYPE_COICES,
widget=RadioSelect(),
required=True,
)
parent = forms.ChoiceField(
label = 'Parent Location',
widget = Select(),
required = False,
help_text = "If you do not choose a parent location, this location will not appear on the locations page"
)
views.py
def locations_by_type(request):
locations = Location.objects.get(type=request.GET["type"])
return json.dumps(locations)
urls.py individual pattern
url(r'^/locations_by_type', views.locations_by_type, name='locations_by_type'),
And when I load the form, the form itself loads fine, however I get an error from the request in the javascript console:
GET http://locations_by_type/?type=state net::ERR_NAME_NOT_RESOLVED
Any ideas as to what I am doing wrong here?
UPDATE 1
I had a "/" in front of locations_by_type in the url regex previously. After fixing this, the javascript console reported a 500 Internal Server Error
The Django error that is logged in the manage.py runserver window is:
TypeError: <Location: SC> is not JSON serializable
UPDATE 2
I have managed to get rid of the 500 internal server error, however the data doesn't return as expected. I believe it has something to do with how I iterate over the returned locations list in the location.html script, but I'm not positive.
My forms.py remains the same as it was when this question was asked.
views.py
def locations_by_type(request):
locations = Location.objects.filter(type=request.GET["type"]).values('id', 'name')
data = json.dumps(list(locations), cls=DjangoJSONEncoder)
return HttpResponse(data, content_type='application/json')
location.html script
<script>
//Update Location Select box given a type
function updateLocations(type) {
$.getJSON("{% url 'locations_by_type' %}", {type: type}, function(locations) {
var locations_select = $("select[name='parent']");
$.each(locations, function (index, value) {
locations_select.append($("<option/>", {
value: index,
text: value
}));
});
});
}
//If there is a type selected at document load, make sure parent select
// has the appropriate values, otherwise hide it
$(document).ready(function() {
if ($("input[name='type']:checked").size() == 0) {
$("select[name='parent']").parent().parent().hide();
} else {
var type = $("input[name='type']:checked").val();
updateLocations(type);
}
});
//Whenever type is changed, make sure the parent select is shown and has
// the appropriate values
$("input[name='type']").change(function() {
$("select[name='parent']").parent().parent().show();
var type = $("input[name='type']:checked").val();
updateLocations(type);
})
</script>
Finally, what I get returned is:
<select id="id_parent" name="parent">
<option value="0">[object Object]</option>
<option value="1">[object Object]</option>
....
</select>
However, I would like:
<select id="id_parent" name="parent">
<option value="[location.id]">[location.name]</option>
<option value="[location.id]">[location.name]</option>
....
</select>