2

Estoy haciendo pruebas para un formulario que debo hacer y lo más importante son dos combo box, en donde el segundo depende de la elección del primero. He hecho muchas pruebas con diferentes métodos pero no he conseguido el resultado que necesito.

Actualmente tengo estos archivos en mi proyecto:

forms.py:

from django import forms
from .models import TblInfoCatalogoValores
from .choices import tupla_lista, tupla_lista_2

class pruebaForm(forms.Form):
    multiple_choice = forms.ChoiceField(
        label=u"Select multiple", 
        choices=tupla_lista, 
        widget=forms.widgets.Select, 
        initial=(c[0] for c in tupla_lista)
    )

    multiple_choice_2 = forms.ChoiceField(
        label=u"Select multiple 2", 
        choices=tupla_lista_2, 
        widget=forms.widgets.Select, 
        initial=(d[0] for d in tupla_lista_2)
    )

Para las opciones tengo un archivo choices.py con lo siguiente:

from .models import TblInfoCatalogoValores
#-----------------------Primer Select-----------------------
tupla = []
query_1 = TblInfoCatalogoValores.objects.filter(id_catalogo = 22).values_list("valor", "des_valor")
for i in query_1:
    tupla.append(i)
tupla_lista =  tuple(tupla)
#-----------------------Segundo Select-----------------------
tupla_2 = []
query_2 = TblInfoCatalogoValores.objects.filter(id_catalogo = 23).values_list("valor", "des_valor")
for e in query_2:
    tupla_2.append(e)

tupla_lista_2 = tuple(tupla_2)

El modelo que estoy utilizando es este: models.py

class TblInfoCatalogoValores(models.Model):
    id_valor = models.AutoField(db_column='ID_VALOR', primary_key=True)  
    id_catalogo = models.ForeignKey(TblInfoCatalogoId, models.DO_NOTHING, db_column='ID_CATALOGO')  
    valor = models.CharField(db_column='VALOR', max_length=10)  
    des_valor = models.CharField(db_column='DES_VALOR', max_length=150, blank=True, null=True)  
    val_1 = models.CharField(db_column='VAL_1', max_length=20, blank=True, null=True)  
    val_2 = models.CharField(db_column='VAL_2', max_length=20, blank=True, null=True)  
    val_3 = models.CharField(db_column='VAL_3', max_length=20, blank=True, null=True)  
    val_4 = models.CharField(db_column='VAL_4', max_length=20, blank=True, null=True)  
    val_5 = models.CharField(db_column='VAL_5', max_length=20, blank=True, null=True)  
    val_6 = models.CharField(db_column='VAL_6', max_length=20, blank=True, null=True)  
    val_7 = models.CharField(db_column='VAL_7', max_length=20, blank=True, null=True)  
    orden = models.IntegerField(db_column='ORDEN', blank=True, null=True)  

    class Meta:
        managed = False
        db_table = 'TBL_INFO_CATALOGO_VALORES'

Y lo que estoy utilizando de esta tabla es esto. En donde ID_CATALOGO = 22, serían los datos del primer select y ID_CATALOGO = 23 son los datos que dependen de el primer select:

introducir la descripción de la imagen aquí

Tengo esto en mi views.py:

from .forms import pruebaForm

def pruebaViewForm(request):
    formulario = pruebaForm()

    if request.method == 'POST':
        formulario = pruebaForm(request.POST)
        if formulario.is_valid():
            url = reverse('inicio') 
            return HttpResponseRedirect(url)
    return render(request, 'pruebaForm.html', 
        {'formulario_prueba': formulario}
)

En mi ajax.py tengo problemas, y no se como solucionarlos... No se como hacer para comparar los valores:

from django.http import JsonResponse
from .models import TblInfoCatalogoValores
from .choices import tupla_lista, tupla_lista_2

def get_sub_objetivo(request):
    objetivo_id = request.GET.get("objetivo_id")
    sub_objetivos = tupla_lista_2
    options = '<option value = "" disabled>*********</option>'

    for sub_objetivo in sub_objetivos:
        options += '<option value = "%s">%s</option>' % (
            sub_objetivo.val_1,
            sub_objetivo.valor
        )

    response = {}
    response['sub_objetivos'] = options
    return JsonResponse(response)

Para la función ajax estoy utilizando esto en mi archivo urls.py:

url(r'^ajax/get_sub_objetivo/$', get_sub_objetivo, name='get_sub_objetivo')

Y en mi template.html tengo esto:

<h1>Formulario de prueba</h1>
<form method="POST">
    {% csrf_token %}
    <div>
        {{ formulario_prueba.multiple_choice.label_tag }}
        {{ formulario_prueba.multiple_choice}}
    </div>
    <div>
        {{ formulario_prueba.multiple_choice_2.label_tag }}
        {{ formulario_prueba.multiple_choice_2}}
    </div>
    <input type="submit" name="Enviar">
</form>

<script type="text/javascript">
    //Le doy la función de onchange al select de sub-objetivos.
    $(document).ready(function(){
        $("#id_multiple_choice").on("change", getSubObjetivos);
    });
    function getSubObjetivos(){
        var id_select_1 = $("#id_multiple_choice").val();

        if (id_select_1) { alert(id_select_1)} //esto es una prueba
        if (id_select_1) {
            $("#id_multiple_choice_2").html("");
            alert("Entro!!!!!!!!"); //Esto es una prueba

            var request = $.ajax(
                {
                    type: "GET",
                    url: "{% url 'get_sub_objetivo' %}",
                    data: {
                        "objetivo_id": id_select_1
                    },
                    success:  function (response) {
                        $("#id_multiple_choice_2").html(response.sub_objetivos);
                    }
                }
            );

            request.done(function(response){
                alert("Regreso"); //Esto es una prueba
                $("#id_multiple_choice").html(response.sub_objetivos);
                $("#id_multiple_choice_2").trigger("change");
            });
        } 
        else {
            alert("Error"); //esto es una prueba
            $("#id_multiple_choice_2").html("<option value='' selected='selected'>-------</option>");
            $("#id_multiple_choice_2").trigger("change");
        }
    }
</script>

Esto lo he hecho guiando me de este ejemplo

Gracias por sus respuestas.

1 respuesta 1

0

Ya solucioné mi problema. Mi problema está en el ajax.py y especificamente en la compraración de los datos. Aquí mi código:

ajax.py:

from django.http import JsonResponse
from .models import TblInfoCatalogoValores

query_2 = TblInfoCatalogoValores.objects.filter(id_catalogo = 23)

def get_sub_objetivo(request):
    objetivo_id = request.GET.get("objetivo_id")
    options = '<option value = "", disabled= "true", selected>Seleccione sub-objetivo</option>'

    if objetivo_id:
        sub_objetivos = query_2.filter(val_1=objetivo_id)
        sub_objetivos = sub_objetivos.values_list("valor", "des_valor")
        tupla_sub_objetivos = tuple(sub_objetivos)

    for sub_objetivo in tupla_sub_objetivos:
        options += '<option value = "%s">%s</option>' % (
            sub_objetivo[0],
            sub_objetivo[1]     
        )

    response = {}
    response['sub_objetivos'] = options
    return JsonResponse(response)

template.html - Script

<script type="text/javascript">
        $(document).ready(function(){
            $("#id_objetivos").on("change", getSubObjetivos);
        });

        function getSubObjetivos(){
            var id_select_1 = $("#id_objetivos").val();

            if (id_select_1) {
                $("#id_sub_objetivos").html("");
                var request = $.ajax(
                    {
                        type: "GET",
                        url: "{% url 'get_sub_objetivo' %}",
                        data: {
                            "objetivo_id": id_select_1
                        },
                        success:  function (response) {
                            $("#id_sub_objetivos").html(response.sub_objetivos);
                        }
                    }
                );

                request.done(function(response){
                    console.log(id_select_1);
                    $("#id_sub_objetivos").trigger("change");
                });
            } 

            else {
                $("#id_sub_objetivos").html("<option value='' selected='selected'>-------</option>");
                $("#id_sub_objetivos").trigger("change");
            }
        }

        $("#id_objetivos option:first").attr({
            'disabled': 'disabled',
            'selected': 'selected',
        });
    </script>

Tuve que comparar los datos obtenidos en la tupla que se creó en ajax.py y con esto ya estaría listo. Espero les sea ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.