I'm trying to send a value from my index to a list page where I have some filters. I can send the value but it take a MultiValueDictKeyError.
I use Djagno 3.1.7, jQuery and Ajax for this exercise. I think the error is in the Ajax because it returns value "all" and the button value.
This is my index form html:
<form action="wallacar_app/lista/" method="GET" class="trip-form">
<label for="tipos">Tipo</label><br>
{% for tipo in tipos %}
<button name="type_car" value="{{ tipo.type_car }}" id="{{ tipo.type_car }}" class="form-control px-3 btn-primary btn">{{ tipo.type_car }}</option>
{% endfor %}
</form>
This is my list.html:
<div class="col-sm-2 col-2">
<div class="form-group">
<label for="type_car">TIPO DE COCHE</label>
<select class="form-control" id="type_car"
url = "{%url 'wallacar_app:get_type' %}">
<option value='all' selected>TODOS LOS TIPOS</option>
</select>
</div>
</div>
<table class="table table-bordered"
id="list_data" data-toggle="table" url = "{% url 'wallacar_app:listing' %}">
<thead>
<tr>
<th style="text-align: center;background-color: #007bff;" data-field="brand">RESULTADOS</th>
</tr>
</thead>
<tbody id="listing">
</tbody>
</table>
The Ajax code for list.html:
$('#type_car').on('change', function () {
// get the api data of updated variety
if(this.value)
send_data['type_car'] = this.value;
else
if(this.value == "all")
send_data['type_car'] = "";
else
send_data['type_car'] = this.value;
getAPIData();
});
function getType() {
// fill the options of provinces by making ajax call
// obtain the url from the provinces select input attribute
let url = $("#type_car").attr("url");
// makes request to getProvince(request) method in views
$.ajax({
method: 'GET',
url: url,
data: {},
success: function (result) {
type_option = "<option value='all' selected>TODOS LOS TIPOS</option>";
$.each(result["type_car"], function (a, b) {
type_option += "<option>" + b + "</option>"
});
$("#type_car").html(type_option)
},
error: function(response){
console.log(response)
}
});
}
My urls.py:
urlpatterns = [
path('lista/', CocheList),
path("listado_coches/", CocheListing.as_view(), name = 'listing'),
path("ajax/type/", getType, name = 'get_type'),
]
My views.py:
def CocheList(request):
return render(request,'wallacar_app/cars.html', {})
class CocheListing(ListAPIView):
pagination_class = StandardResultsSetPagination
serializer_class = CocheSerializers
def get(self, request):
if request.method == "GET" and request.GET['type_car']:
return render(request, 'wallacar_app/cars.html')
def get_queryset(self):
queryList = Coche.objects.all()
type_car = self.request.query_params.get('type_car',None)
if type_car:
queryList = queryList.filter(type_car = type_car)
def getBrand(request):
if request.method == "GET" and request.is_ajax():
brand = Coche.objects.order_by('brand').values_list('brand').distinct()
brand = [i[0] for i in list(brand)]
data = {'brand':brand}
return JsonResponse(data, status = 200)
def getType(request):
if request.method == "GET" and request.GET['type_car']:
type_car = Coche.objects.filter(type_car=request.GET['type_car']).order_by('type_car').values_list('type_car').distinct()
type_car = [i[0] for i in list(type_car)]
data = {'type_car':type_car}
#return JsonResponse(data,status=200)
return render(request, 'wallacar_app/cars.html', data)
elif request.method == "GET" and request.is_ajax() and not request.GET['type_car']:
type_car = Coche.objects.exclude(type_car__isnull=True).exclude(type_car__exact='').order_by('type_car').values_list('type_car').distinct()
type_car = [i[0] for i in list(type_car)]
data = {'type_car':type_car}
return JsonResponse(data,status=200)