Динамические формы Django - популяция полей на лету?

Question

Я просматривал документацию Django и результаты поиска Google, весь день, и я все еще несколько застреваю в попытке создать динамическую форму. Я надеюсь, что мне просто нужно, чтобы кто-то подтолкнул меня в правильном направлении :-) Я только начинаю изучать Django, поэтому я все еще очень начинаю; однако я уже являюсь промежуточным пользователем python.

То, что я пытаюсь сделать, это создать динамическую форму, в которой пользователь делает выбор из выпадающего меню, и на основе этого выбора другая часть формы будет автоматически обновляться, чтобы отображать результаты, относящиеся к текущему выбранный элемент, но из другой таблицы базы данных.

Я попытаюсь использовать упрощенную версию модели из учебника Джанго, чтобы лучше проиллюстрировать то, что я пытаюсь сделать:

# models.py 
from django.db import models 

class Poll(models.Model): 
    question = models.CharField(max_length=200) 

class Choice(models.Model): 
    poll = models.ForeignKey(Poll) 
    choice = models.CharField(max_length=200) 

Так позволяет сказать, что я хочу иметь что-то вроде выпадающего вниз, заполненное вопросом из каждого опроса в базе данных. Я также хочу иметь текстовое поле, в котором отображаются соответствующие варианты для текущего выбранного опроса, который будет обновляться «на лету» всякий раз, когда пользователь выбирает другой пул. Я смог понять это, разместив кнопку и отправив информацию обратно в форму; Тем не менее, я пытаюсь сделать это автоматически, когда пользователь делает выбор. Мой взгляд вроде выглядит примерно так на данный момент:

#view.py 
from django import forms 
from django.shortcuts import render_to_response 

from myapp.models import Poll,Choice 

class MyModelChoiceField(forms.ModelChoiceField): 
    def label_from_instance(self, obj): 
     return "%s" % obj.question 

class PollSelectionForm(forms.Form): 
    polls = MyModelChoiceField(queryset=Poll.objects.all()) 

class ChoiceResults(forms.Form): 
    def __init__(self, newid, *args, **kwargs): 
     super(ChoiceResults, self).__init__(*args, **kwargs) 

     self.fields['choice'] = forms.TextField(initial="") 

def main(request): 
    return render_to_response("myapp/index.html", { 
     "object": PollSelectionForm(), 
     "object2": ChoiceResults(), 
    }) 

Мой шаблон очень просто, что-то вроде

{{ object }} 
{{ object2 }} 

Я уверен, как я буду о создании форм возможно, и не самый лучший, так что не стесняйтесь критиковать это :-) Как я уже говорил, я читал решения, связанные с перепрофилированием формы, но я хочу, чтобы это произошло «на лету» ... если я могу прозрачно прозрачно то это было бы хорошо, я думаю. Я также видел библиотеки, которые позволят вам динамически создавать формы, но это просто кажется излишним.

Answer 1

Вот один подход - Django/jQuery Cascading Select Boxes?

Вы можете создать новый вид, что просто визуализирует JSON в строку, , а затем вызвать событие, когда вы сделали выбор из первого списка, который загружает данные динамически это json.

Answer 2

Здесь я делаю подобную вещь, заполняя форму, основанную на выборе в раскрывающемся списке. Возможно, это поможет вам.

Вот модель значений, используемых для предварительного заполнения формы:

class OpmerkingenGebrek(models.Model): 
    opmerking = models.CharField(max_length=255) 
    advies = models.CharField(max_length=255) 
    urgentiecodering = models.CharField(max_length=2, choices=URGENTIE_CHOICES_2011) 
    bepaling = models.CharField(max_length=155,blank=True,null=True) 
    aard = models.CharField(max_length=3, choices=AARD_CHOICES) 

мнение, которое управляет формой:

def manage_component(request,project_id,.....): 
    # get values for pre-populate 
    og = OpmerkingenGebrek.objects.all() 
    ......... 
    formset = ComponentForm(request.POST,request.FILES) 
    ......... 
     ))) 
    return render_to_response(template, { 
     'formset':formset, 
     ........ 
     'og':og, 
     },context_instance=RequestContext(request)) 

HTML-Штукатурки форме

{% extends "base.html" %} 
{% block extra_js %} 
<script type="text/javascript" src="/media/js/limitText.js"></script> 
<script type="text/javascript" src="/media/js/getValueOpmerking.js"></script> 
{% endblock %} 
<form enctype="multipart/form-data" method="post" action=""> 
{{ formset.as_table }} 
</form> 

<p>Choose default values:</p> 
<select id="default" onChange="getValue(this)"> 
    {% for i in og %} 
    <option value="{{ i.opmerking }} | {{ i.advies }} | {{ i.urgentiecodering }} | 
    {{ i.aard }} | {{ i.bepaling }}">{{ i.opmerking }}</option> 
    {% endfor %} 
</select> 

javascript, который предварительно заполняет форму:

функции GetValue (Сель)

{ 
    //get values 
    var opm = sel.options[sel.selectedIndex].value; 
    //split string to parts 
    var parts = opm.split("|"); 
    // autofill form 
    var opmerking = document.getElementById("id_opmerking"); 
    opmerking.value = parts[0]; 
    var aanbeveling = document.getElementById("id_aanbeveling"); 
    aanbeveling.value = parts[1]; 
    var opt = document.getElementById("id_urgentie"); 
    var urgentie = opt.selectedIndex; 
    for(var i=0;i<opt.length;i++){ 
     if(opt.options[i].value == parts[2].split(' ').join('')){ 
      opt.selectedIndex = i; 
     }}; 

    var opt = document.getElementById("id_aard"); 
    var aard = opt.selectedIndex; 
    for(var i=0;i<opt.length;i++){ 
     if(opt.options[i].value == parts[3].split(' ').join('')){ 
      opt.selectedIndex = i; 
      }}; 

    var bepaling = document.getElementById("id_bepaling"); 
    bepaling.value = parts[4]; 
    };