4

Estou utilizando uma função tirada desse site:

https://github.com/nodet07/Django-Related-DropDowns

A Função funciona perfeitamente, quando seleciono uma opção em um dropdown, no 2º DropDown já me traz o que eu quero, o único problema é após clicar no botão submit que não me traz os campos selecionados desses dropdowns, acredito que eu não estou sabendo como usar o método POST no javascript. Não tenho muito conhecimento em javascript/ajax. Segue abaixo pequena parte de um exemplo do que estou tentando fazer:

Model

class Regiao(models.Model):    
    marca=models.IntegerField('Marca', null=True, blank=True,)
    cor=models.ForeignKey('cor.Cor', verbose_name=u'Cores', null=True, blank=True,)

Form

class RegiaoForm(forms.ModelForm):
    class Meta:
        model=Regiao
    fields=['marca', 'cor']

Views

form = RegiaoForm(request.POST or None)

    if form.is_valid():
        saveMarca = request.POST['marca']

        return redirect('apps.past.views.marcas')

marcas=Marca.objects.all()

return render_to_response('marca.html', {'form':form, 'marcas':marcas}, context_instance=RequestContext(request))

def log_getdetails(request):
    selected_marca = ""

    marca_name = request.GET['cnt']

    result_set = []
    all_cores = []

    marca_name = marca_name.split()
    marca_name = str(marca_name[2])

    selected_marca = Marca.objects.get(name=marca_name)
    all_cores = selected_marca.cor_set.all()
    for cor in all_cores:
        result_set.append({'name': cor.name})

    return HttpResponse(json.dumps(result_set), mimetype='application/json', content_type='application/json')

Template

JAVASCRIPT

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>

    <script>
        $(document).ready(function(){
             $('select#selectmarcas').change(function () {
                 var optionSelected = $(this).find("option:selected");
                 //var valueSelected  = $(this.result).find("option:selected");
                 var marca_name   = optionSelected.text();


                 data = {'cnt' : marca_name};
                 ajax('/getdetails',data,function(result){
                        console.log(result);
                        $("#selectcores option").remove();
                        $("#selectcores").append('<option>'+'TODOS'+'</option>');
                        for (var i = result.length - 1; i >= 0; i--) {
                            $("#selectcores").append('<option>'+ result[i].name +'</option>');
                        };

                     });
             });
        });
</script>

HTML

{% block content %}
    <form class="form-horizontal" method="post">
        {% csrf_token %}
            {% load add_attr %}
<select class="form-control" name="selectmarcas" id="selectmarcas" >
                    <option value="">TODAS</option>
                    {% for marca in marcas %}
                        <option value="{{marca.id }}">{{ marca.name }}</option>
                    {% endfor %}
                </select>
                </div>
            </div>
            <br/>
            <div class="row {% if form.cor.errors %}has-error{% endif %}">
            <label class="col-md-2 control-label" for="{{form.cor.auto_id }}">
                {{form.cor.label }}
            </label>
                <div>
                    <select class="form-control" name ="selectcores" id="selectcores">
                        <option value="">TODAS</option>
                    </select>
           <button type="submit" class="btn btn-primary">Salvar</button>
</form>
{% endblock %}

O que eu preciso é que além de fazer um dropdown dependente do outro é poder salvar as informações que selecionei após dar o submit. Me desculpe caso coloquei muita informação, mas estou tentando deixar mais claro minha pergunta.

1 Resposta 1

1

Tive um problema parecido e depois de horas e horas de pesquisa, resolvi implementar minha versão. Vou explicar resumidiamente aqui, disponibilizei a versão completa e funcional no github, veja os links no final dessa resposta.

Considere para essa resposta um cadastro de veículos em um frota, onde temos 3 tabelas: Marcas (Brand), Modelos dos veiculos (Car) e Frota (Fleet).

Veja a versão em html+javascript abaixo, e, em seguida, a explanação da solução em Django:

// By Sidon | 2017
// Fiddle version: https://jsfiddle.net/Sidon/6m1nf0zu/62/
$(document).ready(function(){

    $('#brand').change(function() {populateCar()});  
  
    var ford = ['Fiesta', 'Focus', 'Fusion', 'Taurus', 'Mustang'];
    var vw = ['Passat', 'Tiguan', 'Golf', 'Jetta', 'Up']
    var fiat = ['Punto', '500', '500 City', 'Panda', 'Doblô']
    var cars =  {'Ford': ford, 'Volks': vw, 'Fiat': fiat}
    var brands = ['Ford','Fiat', 'Volks']
    populateBrand()
  
  
    function populateBrand() {
        $("#brand").empty();
        $("#brand").append('<option value="" disabled selected>Select your option</option>');
        $.each(brands, function(v) {
            $('#brand')
                .append($("<option></option>")
                .attr("value", brands[v])
                .text(brands[v]));
        })
    }


    function populateCar(event) {
        brand = $("#brand option:selected" ).text();
        $("#car").empty();
        for (let [k, v] of Object.entries(cars)) {
            if(k==brand) {
                for (car in cars[brand]) {
                    var opt = document.createElement("option");
                     $('#car')
                         .append($("<option></option>")
                         .attr("value", cars[brand][car])
                         .text(cars[brand][car]));
                }
            };
        }
    }
 
});
body {
  margin-left: 30px
}

.select-style {
    width: 320px;
    height: 100%;
    border-radius: 3px;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- By Sidon | 2017
Fiddle version: https://jsfiddle.net/Sidon/6m1nf0zu/62/ -->
<body>

    <div class="select-style">
    <br />Brand:
    <select required id="brand">
    </select>

    <br />  
    <br />Car:     
    <select id="car" >
        <option value=""> </option>
    </select>
  </div>
      
</body>

Deste trecho em diante, a descrição da solução em Django


models.py

from django.db import models

class Brand(models.Model):
    company_name = models.CharField(max_length=100)

    def __str__(self):
        return self.company_name


class Car(models.Model):
    brand = models.ForeignKey(Brand)
    name = models.CharField(max_length=100)

    def brand_name(self):
        return self.brand.company_name

    def __str__(self):
        return self.name


class Fleet(models.Model):
    car = models.ForeignKey(Car)
    description = models.CharField(max_length=100)

    def car_name(self):
        return self.car.name

    def brand(self):
        return self.car.brand.company_name

    def __str__(self):
        return self.description

O objetivo é registrar os carros na frota (fleet). Veja que somente os campos car (chave estrangeira) e descrição serão realmente gravados. No form haverá um combo que utilizará a classe brand, somente para filtrar o proximo combo (os modelos dos carros).


forms.py

import json
from django import forms
from .models import *

class RegCarForm(forms.ModelForm):

    dcars = {}
    list_cars = []
    for car in Car.objects.all():
        if car.brand.company_name in dcars:
            dcars[car.brand.company_name].append(car.name)
        else:
            dcars[car.brand.company_name] = [car.name]
        list_cars.append((car.name,car.name))

    brands = [str(brand) for brand in Brand.objects.all()]

    brand_select = forms.ChoiceField(choices=([(brand, brand) for brand in brands]))
    car_select = forms.ChoiceField(choices=(list_cars))

    brands = json.dumps(brands)
    cars = json.dumps(dcars)

    class Meta:
        model = Fleet
        fields = ('brand_select', 'car_select', 'description',)

RegCarForm é o Form para o registro dos carros, nele há 3 campos: brand_select, car_select, e description, adcionalmente criei 2 atributos JSON: 1) Um dicionario cujas chaves são as marcas e os valores são listas de seus respectivos modelos de caros, e 2) Uma lista das marcas. Esses dois atributos servirão como variaveis auxiliares para as funções JS.


views

from django.shortcuts import render
from .forms import RegCarForm
from .models import *

# Create your views here.

def regcar(request):
    if request.method == 'POST':
        car_form = RegCarForm(data=request.POST)

        if car_form.is_valid():
            cdata = car_form.cleaned_data.get
            car_selected = Car.objects.filter(name=cdata('car_select'))
            reg1 = Fleet(car_id=car_selected[0].id, description=cdata('description'))
            reg1.save()
        else:
            print ('Invalid')

    else:
        car_form = RegCarForm()
    return render(request, 'core/regcar.html', {'car_form': car_form})

A view é auto-explicativa, atribui o Form à variável car_form, renderiza a template core/regcar.html e, após o Post, valida o form e salva os dados.


regcar.html (template django)

{% extends "base.html" %}

{% block head %}
{% endblock %}

{% block content %}
    <h1>Registering cars on the fleet. <br />(Populate one drop down based on selection in another)</h1>
    <p>Change the contents of drop down Car based on the selection in dropdown Brand, using Django-forms + Javascritp</p>
    <div class="select-style">
        <form action="." method="post">
            {% csrf_token %}
            {{ car_form.as_p }}
            <p><input type="submit" value="Register a car"></p>
        </form>
    </div>
{% endblock %}

{% block js %}
    {% include "js1.html" %}
{% endblock %}

A template somente renderiza o form e carrega o script JS.


Finalmente, o script JS. O que faz o trabalho pesado.

{% block js %}
    <script language="javascript">
        $('#id_brand_select').change(function() {populateCar(this)});
        $('#id_description').addClass('descriptions');
        cars = {{ car_form.cars | safe }}
        brands = {{ car_form.brands | safe}};
        populateBrand();
        $("#id_car_select").empty();
        $("#id_car_select").append('<option value="" disabled selected>First select a brand</option>');

        function populateBrand() {
            $('#id_brand_select').empty();
            $("#id_brand_select").append('<option value="" disabled selected>Select your option</option>');
            $.each(brands, function(v) {
                $('#id_brand_select')
                    .append($("<option></option>")
                    .attr("value", brands[v])
                    .text(brands[v]));
            });
        }

        function populateCar(event) {
            brand = $("#id_brand_select option:selected").text();
            $("#id_car_select").empty();
            $("#id_car_select").append('<option value="" disabled selected>Select your option</option>');
            for (let [b, bcars] of Object.entries(cars)) {
                if (b == brand) {
                    //alert(b);
                    for (car in bcars) {
                        $('#id_car_select')
                            .append($("<option></option>")
                                .attr("value", bcars[car])
                                .text(bcars[car]));
                    }
                }
            }
        }
    </script>
{% endblock %}

Quando o documento é carregado, o script atribui o evento change do elemento brand_select (combo para a seleção das marcas) à função populateCar, cria duas variavei JS atribuindo os valores dos atributos JSON do form a elas (cars e brands) e chama a função populateBrand.

Links:

Projeto completo em django:
https://github.com/Sidon/djfkf/

Codepen Version:
https://codepen.io/Sidon/pen/yMpbKg

Fiddle Version:
https://jsfiddle.net/Sidon/6m1nf0zu/62/

This question in English

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .