Necesito crear y guardar campos dinamicos en Django!

1,399 views
Skip to first unread message

Javier Esparza

unread,
Jul 12, 2016, 5:48:56 PM7/12/16
to Django-es
Les cuento necesito hacer un formulario de solicitud de materiales, como bien saben estos pueden ser de 1 a miles, por lo mismo necesito crear campos dinámicos en mi formulario, esto lo hice gracias a la ayuda de jquery,(http://www.masquewordpress.com/anadir-campos-a-un-formulario-dinamicamente-con-jquery/) mi problema es que no se como guardarlo en mi modelo, en php lo hacia guardándolos en un array, y los separaba por una ","(coma) al momento de guardarlos en mi base de datos, cabe señalar que en el campo donde los guardaba era de tipo TEXT,


acepto todas las sugerencias ya que soy nuevo en esto :(

Rafael E. Ferrero

unread,
Jul 13, 2016, 7:13:35 AM7/13/16
to djan...@googlegroups.com
Si es en el formulario (entiendo por esto un HTML) lo podés seguir haciendo con Jquery.... pero si lo quieres hacer en el modelo ¿Hay algún motivo en particular para agregar un campo de forma dinámica? ya que esto no es para nada canónico.

¿Podrías ampliar tu explicación?

Saludos !!


Rafael E. Ferrero

El 12 de julio de 2016, 15:47, Javier Esparza <javier.e...@gmail.com> escribió:
Les cuento necesito hacer un formulario de solicitud de materiales, como bien saben estos pueden ser de 1 a miles, por lo mismo necesito crear campos dinámicos en mi formulario, esto lo hice gracias a la ayuda de jquery,(http://www.masquewordpress.com/anadir-campos-a-un-formulario-dinamicamente-con-jquery/) mi problema es que no se como guardarlo en mi modelo, en php lo hacia guardándolos en un array, y los separaba por una ","(coma) al momento de guardarlos en mi base de datos, cabe señalar que en el campo donde los guardaba era de tipo TEXT,


acepto todas las sugerencias ya que soy nuevo en esto :(

--
--
Ha recibido este mensaje porque está suscrito a Grupo "Grupo de Usuarios del Framework Django de habla hispana" de Grupos de Google.
Si quieres publicar en este grupo, envía un mensaje de correo
electrónico a djan...@googlegroups.com
Para anular la suscripción a este grupo, envíe un mensaje a django-es-...@googlegroups.com
Para obtener más opciones, visita este grupo en http://groups.google.com.bo/group/django-es.
---
Has recibido este mensaje porque estás suscrito al grupo "Django-es" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a django-es+...@googlegroups.com.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

Phoenix

unread,
Jul 13, 2016, 10:08:21 AM7/13/16
to Django-es
Por dinámico que entendés vos? que se vaya agregando un item de pedido a medida que vas completando el pedido de materiales?

js.to...@me.com

unread,
Jul 13, 2016, 10:44:33 AM7/13/16
to Django-es

Creo que los FormSet es lo que buscas. No son "campos" sino formularios dinámicos.

Obtener Outlook para Android




--

Javier Esparza

unread,
Jul 13, 2016, 4:28:33 PM7/13/16
to Django-es

Mira estuve leyendo sobre los formset y claro es como lo que necesito, pero lo que no se es como agregar los formset dinamicamente como con un boton que diga agregar mas campos


Marcelo Leiva Sandoval

unread,
Jul 13, 2016, 4:33:07 PM7/13/16
to djan...@googlegroups.com

Hola, yo uso este plugin para formset dinamicos https://github.com/elo80ka/django-dynamic-formset.

Saludos

El 13-07-16 a las 4:28 p.m., Javier Esparza escribió:

Mira estuve leyendo sobre los formset y claro es como lo que necesito, pero lo que no se es como agregar los formset dinamicamente como con un boton que diga agregar mas campos


Ricardo Daniel Quiroga

unread,
Jul 14, 2016, 8:56:33 AM7/14/16
to Grupo Django-Es
Hola
Creo que la cuestion se esta desviando del tema Django a Hacer una vista dinamica

Lo de Agregar nuevos items en el HTML y enviarlos es bastante sencillo si sabes manejar el DOM que se resume en agregar un nuevo nodo via jquery
Boton enviar es solo parsear y evaluar el fragmento html generado y todo esto es Javascript  me es mas complicado explicarlo que hacerlo, 
no entiendo porque lo relacionan con Django siendo que esto se ejecuta en su mayoria de lado de cliente siendo transparente que hay detras de servidor
ya que solo necesitas un controlador que maneje los datos estaticos de esta pagina dinamica y otras pocas que manejen las peticiones AJAX como una pequeña API REST, esto
es lo mismo de lado cliente para Django, Rails, PHP o lo que sea.

Saludos


--

Ricardo Daniel Quiroga

Alvaro Manrique

unread,
Jul 14, 2016, 9:11:07 AM7/14/16
to djan...@googlegroups.com
Hola Javier,

Creo que tu confusión es porque estas mezclando algunos conceptos.

1.- Generar mas campos de un formulario HTML es un tema y creo que con lo que explica en la pagina de ejemplo que envías puedes resolver.
2.- Para enviar esta información debes hacerla por medio de funciones o rutinas que programes en JS, lo que te puedo recomendar en este caso es que todos los "items" que agregues dinámicamente a tu formulario los conviertas en cadenas Json y estas que formen parte de un array para que finalmente al enviarlo al servidor (via AJAX por ejemplo) este lo decodifique de Json a una tupla de diccionarios de Python, esto obviamente lo desarrollas en un View para tal fin.
3.- La manera de almacenarlo en base de datos siguiendo el ejemplo que te planteo pues sería simplemente recorriendo esa tupla que tienes y  envías cada registro a tu modelo.

No puedes generar información dinámica por así decirlo y luego querer procesarla en bloque debes tratarla cuando y como corresponde y en el proceso descubres los conceptos que debes manejar y aplicarlos correctamente.

Saludos.


--------------------------------------------------------------
Alvaro Manrique
Programador
---------------------------------------------------------------

Javier Esparza

unread,
Jul 14, 2016, 8:06:50 PM7/14/16
to Django-es
Hola miren creo que he avanzado un poco con el asunto, gracias a la publicación de un amigo me di cuenta que era un formset lo que necesitaba, buscando y buscando encontré django-formset-js me ha servido un montón ya logro tener la vista y hace lo que quiero, pero el problema que tengo ahora sigue siendo al guardar, pido disculpas si el error sigue siendo básico para ustedes pero créanme que me ayudaran mucho.

FORMS.PY

from django import forms
from ..solicitud.models import Solicitud, DetalleSolicitud
from djangoformsetjs.utils import formset_media_js
from django.forms import formset_factory 

class SolicitudForm(forms.Form):
    motivo_solicitud = forms.CharField(widget= forms.TextInput(attrs={'class':'form-control'}))
    observacion_solicitud = forms.CharField(widget= forms.Textarea(attrs={'class':'form-control'}))



class DetalleSolicitudForm(forms.Form):
    detalle_solicitud = forms.CharField(widget= forms.TextInput(attrs={'class':'form-control detalleSolicitud'}))
    cantidad_solicitud = forms.IntegerField(widget= forms.NumberInput(attrs={'class':'form-control cantidadSolicitud'}))
    class Meta(object):
        js = formset_media_js + (

        )

DetalleSolicitudSet = formset_factory(DetalleSolicitudForm)

VIEWS.PY

from django.shortcuts import render, render_to_response, redirect
from ..solicitud.forms import SolicitudForm, DetalleSolicitudSet
from django.forms import formset_factory
from django import forms
# Create your views here.

def SolicitudSet(request):
    template_name = 'solicitud/solicitudRegistrar.html'

    formset = DetalleSolicitudSet(request.POST or None)

    if request.method == 'POST':
        form = SolicitudForm(request.POST)
        formset = DetalleSolicitudSet(request.POST)
        if form.is_valid() and formset.is_valid():
            formset.save()
            form.save()
        return redirect('solicitud:solicitud_create')
    else:
        form = SolicitudForm()
        formset = DetalleSolicitudSet()
    return render(request, template_name, {'formset': formset, 'solicitudForm':form})


solicitudRegistrar.html

{% extends 'base/base.html'%}
{% load staticfiles %}
{% block title %}
    Registrar Solicitud
{% endblock title %}
{% block staticFiles %}
    <script src="{% static 'js/jquery.formset.js' %}"></script>
    <style type="text/css">
.add-row {
        position: absolute;
        width: 20px;
        height: 20px;
        margin: -49px 0% 0% 675px;
        padding-left: 17px;
        background:url({% static 'images/add.png' %}) no-repeat left center;
    }
    .delete-row {
        display: -webkit-inline-box;
        text-indent:-6000px;
        background:url({% static 'images/delete.png' %}) no-repeat left center;
        width:16px;
        height:16px;
    }
    .contenedorFormset {
    display: -webkit-inline-box;
    }
    </style>
{% endblock staticFiles %}
{% block content %}
    <div id="stylized" class="myform" style="margin:20px auto;">
       <form action="" method="POST">{% csrf_token %}

        {% load formset_tags %}
            <h1>Compra de material</h1>
            <p>Si es necesario a&ntilde;ade el material a comprar</p>
            <div class="solicitarMotivoForm">
                 <label class="lblMaterialMotivo">Motivo</label> 
                 {{ solicitudForm.motivo_solicitud}}
            </div>
            <div id="formset" data-formset-prefix="{{ formset.prefix }}">
                {{ formset.management_form }}

                <div class="contenedorFormset" data-formset-body>
                    <!-- New forms will be inserted in here -->
                    
                    {% for form in formset %}
                        {% include "solicitud/form.html" with form=form only %}
                    {% endfor %}

                </div>

                <!-- The empty form template. By wrapping this in a <script> tag, the
                __prefix__ placeholder can easily be replaced in both attributes and
                any scripts -->
                <script type="form-template" data-formset-empty-form>
                    {% escapescript %}
                        {% include "solicitud/form.html" with form=formset.empty_form only %}
                    {% endescapescript %}
                </script>

                <!-- This button will add a new form when clicked -->
                <script>jQuery(function($) {
                    $("#formset").formset({
                        'animateForms': true,
                        'reorderMode': 'animate'
                    }).on('formAdded', function() {
                        console.log("Form added", this, arguments);
                    }).on('formDeleted', function() {
                        console.log("Form deleted", this, arguments);
                    });
                });</script>
            </div>
            <div class="solicitarMotivoForm solicitarObservacionForm">
                <label class="lblMaterialobservacion">Observacion</label> 
                {{solicitudForm.observacion_solicitud}}
            </div>
                <button type="submit" class="btn btn-default">Guardar</button>

        </form>
    </div>
{% endblock content%}


Reply all
Reply to author
Forward
0 new messages