2

Estoy trabajando con campos en un modelo en donde el valor de un campo depende de una opción seleccionada en un campo anterior en el formulario (el cual por ahora es via django administrator). Para ello estoy utilizando la aplicación django-smart-selects

Me gustaría que vieran este video para darme a entender un poco cual es mi situación y del porque pregunto lo de hacer debug o depuración en relación con los campos con los que me encuentro trabajando.

He puesto un video, dado que es lo mas ilustrativo a mi situación pues son eventos visuales a acorde a selecciones. No se como generar gifs para ponerlos como imágenes. Disculpenme si les incomoda.

  • El campo padre, Segmento afectado en el video permite seleccionar múltiples opciones.

  • El campo hijo, Movimiento en el video, muestra los movimientos que puede realizar el segmento afectado que se selecciona en el campo padre.

Situación que me ocurre

1. En el video se muestra claramente que cuando selecciono solo un segmento afectado en el campo padre, me aparecen las opciones de movimientos de ese segmento en el campo hijo, y en la consola de mi IDE el código de status HTTP/1.1 200 con la operación GET, indicándome que se pudieron obtener y desplegar exitosamente los movimientos que corresponden al segmento afectado seleccionado.

2. Pero cuando selecciono mas de un segmento afectado en el campo padre (si selecciono de a 2 segmentos en adelante) inmediatamente en la consola de mi IDE en el log del servidor Django me aparece el código de status HTTP/1.1 400 (Not Found en color amarillo en la consola de mi IDE) pues no asimila la segunda selección o el segundo segmento afectado que el usuario selecciona, y por ende, tampoco se me despliegan en el campo hijo los movimientos asociados o que ese segundo segmento afectado puede realizar.

No se como abordar o evaluar esta situación, ya que este formulario en donde estan los campos padre (Segmento afectado) e hijo (Movimiento), esta representado en el administrador de Django debido a que tengo un modelo llamado AffectedSegment y otro llamado Movementy a través de la funcionalidad ChainedManyToManyField de django-smart-selects es que hago que se desplieguen valores en el campo hijo acorde a la selección del campo padre.

Mis modelos y el encadenamiento de valores para este comportamiento son estos:

class AffectedSegment(models.Model):
    SEGMENTO_ESCAPULA = 'ESCAPULA'
    SEGMENTO_HOMBRO = 'HOMBRO'
    SEGMENTO_CODO = 'CODO'
    SEGMENTO_ANTEBRAZO = 'ANTEBRAZO'
    SEGMENTO_CARPO_MUNECA = 'CARPO_MUNECA'
    SEGMENTO_MANO = 'MANO'
    SEGMENTO_CHOICES = (
        (SEGMENTO_ESCAPULA, u'Escápula'),
        (SEGMENTO_HOMBRO, u'Hombro'),
        (SEGMENTO_CODO, u'Codo'),
        (SEGMENTO_ANTEBRAZO, u'Antebrazo'),
        (SEGMENTO_CARPO_MUNECA, u'Carpo/Muñeca'),
        (SEGMENTO_MANO, u'Mano'),
    )
    affected_segment = models.CharField(max_length=12, choices=SEGMENTO_CHOICES, blank=False, verbose_name='Segmento afectado')

    class Meta:
        verbose_name = 'Segmentos corporale'

    def __str__(self):
        return "%s" % self.affected_segment

class Movement(models.Model):
    type = models.CharField(max_length=255,verbose_name='Tipo de movimiento')
    corporal_segment_associated = models.ManyToManyField(AffectedSegment, blank=False, verbose_name='Segmento corporal asociado')

    class Meta:
        verbose_name = 'Movimiento'

    def __str__(self):
        return "%s" % self.type

Y la forma en como se encadena o se asocia el comportamiento de que aparezcan los movimientos en el campo hijo acorde a las selección de segmentos afectados en el campo padre es realizado de esta manera:

class RehabilitationSession(models.Model):

    affected_segment = models.ManyToManyField(AffectedSegment,verbose_name='Segmento afectado')
    movement = ChainedManyToManyField(
        Movement, #Modelo encadenado
        chained_field = 'affected_segment',
        chained_model_field = 'corporal_segment_associated',
        verbose_name='Movimiento'
    )

    class Meta:
        verbose_name = 'Sesiones de Rehabilitación'

    def __str__(self):
        return "%s" % self.patient
        #return "%s" % self.affected_segment

Al parecer a otra persona utilizando la misma aplicación de django-smart-selects le ha sucedido lo mismo en el sentido de que en los campos hijos suceden cosas inesperadas, a él no le guarda la información que selecciona en el campo hijo, de hecho a mi me sucede lo mismo (al final del video se puede detallar esto también) solo que no lo menciono acá para no hacer mas largo el post.

No se me ocurre como puedo abordar este reto (para mi lo es :P). Asumo que cuando renderice este formulario de estos modelos no en el administrador de django sino en mis aplicaciones, sucederá lo mismo dado que el admin es una aplicación más en Django y el comportamiento debe ser transversal a todo el entorno de trabajo de Django mismo.

¿Que creen que puedo empezar a pensar? Es importante que ambos campos (padre e hijo) sean de múltiple selección.

¿De pronto pensar en otro mecanismo de desplegar valores en campos acorde a una selección de un campo previo? ¿Con que otra manera tengo de abordar este requerimiento?

¿JavaScript puro (ajax, algun framework frontend)? ¿Otra app que haga lo mismo?

Cualquier colaboración en este sentido, será altamente apreciada. Saludos

1
  • 1
    Amigo, por ahora django-smart-selects está dando muchos problemas, usa la versión de desarrollo para ver si se han resuelto algunos. Muchos de los problemas que hay son debido a que no encuentra el archivo jQuery, por que el camino al archivo está mal integrado en django-smart-selects, esto es por que Django cambió las rutas de sus archivos estáticos.
    – SalahAdDin
    Commented el 13 mar. 2016 a las 21:05

4 respuestas 4

1

fijate, no hay ejemplo mas sencillo que este que implica 2 select, el primero que es el padre el cual llamo con python y sus doble llaves recorriendolo con un for del backend, y el segundo select depende de una consulta que se hace en python tambien, se envia en json y se recorre con un v-for de Vue js.

{% extends 'base.html' %} {% block content %}
<div id="main">
    <form id='form-e' action="" method="GET" >
        <h1>Formulario Tienda </h1>

        <label>hola {nombre} <br>
            <input type="text" v-model="nombre" class="form-control">
        </label>
        <hr>
        <select value="hola" id="select1" v-model="autores" @change="cachea_libros" class="form-control">
            {% for autor in lista_autores %}
            <option value="{{autor.id}}"> {{autor.nombre}} </option>
            {% endfor %}
        </select>
        <hr>

        <select id="select2" class="form-control" v-bind:disabled='!autores' v-model="libros">
            <option v-for="item in lista" v-bind:value="item.pk" >{item.fields.nombre}</option>
        </select>
        <br>

        <input type="submit" value="Enviar" class="btn btn-info" @click.prevent="guarda_formulario">
    </form>
    <br>
    <div class="container">
        <pre>{ $data }</pre>
    </div>
</div>
<hr>

</div>
{% block js %}
<script>
    var urljson = "{% url 'busqueda_ajax' %}";
    var urljson2 = "{% url 'guarda_form' %}";
    new Vue({
        delimiters: ['{', '}'],
        el: "#main",
        created: function () {
            this.cachea_libros();
            //this.guarda_formulario();
        },
        data: {
            nombre: "migue",
            autores: "",
            libros: "",
            form: '',
            lista: [],
        },
        methods: {
            cachea_libros: function () {
                axios.get(urljson, { params: { "id": this.autores } }).then (Response => {
                    this.lista = Response.data;
                    this.libros = '';
                })
            },
            guarda_formulario: function () {

                                axios.get(urljson2, {params: { "nombre": this.nombre, "id_autor":this.autores, "id_libro":this.libros}})
                .then(
                Response => {
                    alert(Response.data);
                })
                .catch(Response =>{
                    alert("Error en el formulario");
                })



            }

        }

    });

</script>
{% endblock %} {% endblock %}

ahora la parte del backend donde atajo los parametros que envian por get.

def consultas(request):
    libros=Libros.objects.all()
    autores=Autor.objects.all()
    tiendas=Tienda.objects.all()
    template="Tienda.html"
    return render(request,template,
                {"lista_libros":libros,"lista_autores":autores,"lista_tiendas":tiendas})


class BuscaAjax(TemplateView):

    def get(self,request,*args,**kwargs):
        id_autor= request.GET["id"]
        libros=Libros.objects.filter(autores__id=id_autor)
        data=serializers.serialize("json",libros,fields=("nombre","id","autores"))
        return HttpResponse(data,content_type="application/json")


def guarda_form(request):
    if request.is_ajax:
        nombre_tienda=request.GET["nombre"] # CAPTURO LOS DATOS QUE PROVIENEN DEL CLIENTE
        id_autor= request.GET["id_autor"]
        id_libro= request.GET["id_libro"]
        tienda=Tienda()                         #CREO UNA NUEVA INSTANCIA DEL MODELO TIENDA
        libros=Libros.objects.get(id=id_libro)
        autores=Autor.objects.get(id=id_autor)
        tienda.nombre=nombre_tienda
        tienda.libros=libros
        tienda.autores=autores
        tienda.save()
        data="se guardo el mensaje"
    else:
        data = "fallo"
    return HttpResponse(data, content_type="text")

con axios. adicional a los selects tambien tienes una guia para guardar datos de un formulario, eso funciona sin necesidad de instalar aplicaciones de django, sin configurar permisos ni nada, solo los modulos de python nativos para serializar y los que responden peticiones. con respecto a vue js te recomiendo el de rimorsoft https://www.youtube.com/watch?v=WKOZ2xPWURU&t=22s te recomiendo el curso completo para que te familiarices con ese extraordinario framework frontend.partiendo de este ejemplo podras aprender a hacer tus propios selects mejor personalizado y con una forma de trabajo menos engorrosa.

2
  • Que gran ejemplo, hace tiempo estoy queriendo aprender algun framework front end para mis aplicaciones. No se por cual decidirme de todos los que hay. Por ahí he visto ejemplos de Django y Angular. Vue JS es similar o hace la misma función de Angular, Ember, React ... , ... , ? Se que cada uno tiene sus cosas y propósito claro
    – bgarcial
    Commented el 14 sept. 2017 a las 21:49
  • 1
    Yo soy nuevo con vue js. Antes usaba solo libreria jquery pero ante adversidades como esta que se trabaja con json y procesamiento de datos se hace la necesidad de usar un framework en mi caso empese con vue puesto a que he leido que es muy facil de aprender. Angular se considera en lineas generales mas complejo por trabajar con scope cosa q aun no he dominado a cavalidad. Vue js coge un poquito de cada framework y trabaja muy elegante poderoso apesar de haber cpmenzado como una libreria. Si tambien eres nuevo con frameworks fend t recomiendo empieces con vue js ya q se sta volviendo popular
    – Miguel
    Commented el 15 sept. 2017 a las 3:11
1

Puedes probar utilizando el debugger de Pycharm (por ejemplo) viendo el contenido de todas las variables y sus metadatos, te resaltará las que han sido más recientemente modificadas, el comportamiento se modificará debido al contenido de alguna.

Pycharm en Community Edition no lleva debugger de Django pero si seleccionas como script de inicio el manage.py te funciona muy bien.

1

Chicos, gracias a los dos por tomarse el tiempo de ayudarme con mi inquietud.

Acorde a la siguiente respuesta django-smart-selects no implementa en los requestsque recibe valores separados por comas en sus expresiones regulares en el archivo urls.py que procesa los requests que realizan los usuarios.

Cuando yo selecciono una sola opcion en el campo Segmentos Afectado, (este es de multiple seleccion) django-smat-select me procesa correctamente la peticion obteniendome un codigo HTTP/1.1" 200

[14/Mar/2016 16:30:05] "GET /chaining/filter/medical_encounter_information/Movement/corporal_segment_associated/medical_encounter_information/RehabilitationSession/movement/3/ HTTP/1.1" 200 84

Pero cuando selecciono mas de un segmento afectado tengo este mensaje de NotFound

Not Found: /chaining/filter/medical_encounter_information/Movement/corporal_segment_associated/medical_encounter_information/RehabilitationSession/movement/2,3/
[14/Mar/2016 16:30:10] "GET /chaining/filter/medical_encounter_information/Movement/corporal_segment_associated/medical_encounter_information/RehabilitationSession/movement/2,3/ HTTP/1.1" 404 5432

Quien me oriento en la respuesta me provee algunas alternativas de solucion tales como:

  1. Extender la funcionalidad en django-smart-selects para que trabaje con requests de enteros separados por comas y que cuando procese esto me retorne los resultados deseados acorde a las opciones que se deben desplegar.

Con respecto a que tome urls con valores enteros separados por comas, ¿Como puedo empezar a investigar esto?

Tengo en mente algunos recursos tales como:

https://docs.djangoproject.com/en/1.9/ref/validators/#validate-comma-separated-integer-list

https://stackoverflow.com/questions/16321007/python-regular-expression-regex-match-comma-separated-number-why-does-this-n

https://stackoverflow.com/questions/2921453/regex-comma-delimited-integers

Y en la opción de que retorne los resultados deseados acorde a las opciones que se selecciones primero , no me queda claro como debo hacer para que me retorne los campos que deben ser desplegados.

Tal vez ¿modificando un queryset en algun lado como por ejemplo cuando se filtran los resultados de un encadenamiento de modelos?

  1. Otra alternativa que me brindan es que en mi clase de administracion puedo sobreeescribir algun query de mi campo basado en la seleccion del campo de anterior, no tengo muy claro como es esto.

  2. Otra alternativa es buscar alguna otra aplicación.

Me gustaría poder intentar la primera opción, para lo cual debo documentarme más al respecto en cuanto a la manera en como debo proceder.

Asi las cosas, este es el estado actual de la aplicación django-smart-selects en cuanto a su trabajo con modelos encadenados cuando en el modelo padre se selecciona mas de una opción, actualmente no recibe sino solo una selección en dicho modelo padre y por ende no despliega las opciones encadenadas en el modelo hijo cuando se selecciona un segundo valor o segunda selección de un campo en el modelo padre.

Cualquier consideración o apreciación es bienvenida

1

te recomiendo usar vue js+ajax bien sea con vue resources o axios, al rpincipio yo estaba como tu buscando alternativas porque me tocaba trabajar con selects inteligentes y probe django smart selects pero es muy engorroso, preferi hacer las cosas paso por paso y creeme que eso te ayuda a utilizar una forma de trabajo nativa y pulcra y el codigo no es tanto. simplemente vas haciendo peticiones get y retornar desde django una respuesta json y listo, organizas todo con vue js utilizando v-for v-if y v-bind que creeme son magicos. parece mucho codigo del lado del cliente pero te aseguro que no lo es.

1
  • Miguel, gracias por tu recomendación. Debo entnces aprender AJAX y JS para abordar una solución como la que me propones. Puede que la curva de aprendizaje sea mas, pero es algo que vale la pena abordar. Queria preguntarte si tienes algun recurso o material para empezar a aprender estas cosas.
    – bgarcial
    Commented el 14 sept. 2017 a las 20:48

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.