How submit a query redirecting a form on django

Viewed 33

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)
0 Answers
Related