与数据从模板填充一个Django的形式动态

Question

我有一个Django的观点如下：

@login_required(login_url="login/") 
def review(request): 
    table = DummyTable(DummyModel.objects.all())   
    form = DummyForm()   
    return render(request, 'review.html', {'reviews': table, 'DummyForm': form}) 

我传递一个默认DummyForm这是一个django-crispy-form（虽然这并不重要的问题，我认为），我需要填充它取决于用户点击的记录。窗体本身看起来：

from .models import DummyModel 
from crispy_forms.helper import FormHelper 
from crispy_forms.layout import Layout, Field, ButtonHolder, Submit 
from django.forms import ModelForm 


class DummyForm(ModelForm): 

    class Meta: 
     model = DummyModel 
     fields = ['name', 'description', 'time_points'] 

    def __init__(self, *args, **kwargs): 
     super(DummyForm, self).__init__(*args, **kwargs) 
     self.helper = FormHelper(self) 
     self.helper.form_class = 'form-horizontal' 
     self.helper.label_class = 'col-sm-2' 
     self.helper.field_class = 'col-sm-10' 
     self.helper.layout = Layout(
      Field('name'), 
      Field('description'), 
      Field('time_points'), 
      ButtonHolder(
       Submit('submit', 'Submit', css_class='button white') 
      )) 

现在，我当用户点击某些链接并接收我想要的形式来呈现记录的主键时调用JavaScript函数。目前，如下：

<script> 
     function EditDialog(pk) { 
      // Currently doing nothing with the primary key 
      // Is there a way to initialise the form with data using this key? 
      $("#dialog").modal({width: 500, height: 500}); 
      return false; 
     } 
    </script> 

这个js函数启动形式为：

<div id="dialog" class="modal" title="Edit" style="display:none"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-body"> 
      <!-- Can I pass the primary key variable here??? --> 
      {% crispy DummyForm %} 
     </div> 
     </div> 
    </div> 
    </div> 

这一切工作正常，除了我正在显示屏幕上的空白表单。我如何将表单绑定到JS函数中由主键给出的记录。

通常，在视图中，我可以做到以下几点：

# As an example, just bind to the record with primary key=1 
rec = DummyModel.objects.filter(pk=1).first() 
form = DummyForm(model_to_dict(rec)) 

所以，在某种程度上，我需要做我的模板内类似的东西。

Answer 1

在您的JS中，您可以向Django视图发出AJAX请求，该视图将返回填充了值的表单。

的JS会是什么样子：

<script> 
    function EditDialog(pk) { 
     //ajax request to retrieve the populated form 
     $.ajax({ 
      url: '/url/to/the/view/which/returns/the/populated/form', 
      method: 'GET', 
      data: { 
      pk: pk 
      }, 
      success: function(formHtml){ 
      //place the populated form HTML in the modal body 
      $('.modal-body').html(formHtml); 
      $("#dialog").modal({width: 500, height: 500}); 
      }, 
      dataType: 'html' 
     }); 

     return false; 
    } 
</script> 

，处理AJAX请求会是什么样的观点：

@login_required(login_url="login/") 
def populate_form(request): 
    pk = request.GET.get('pk') 
    rec = DummyModel.objects.get(pk=pk) 
    form = DummyForm(model_to_dict(rec)) 

    return render(request, 'form.html', {'DummyForm': form}) 

的form.html模板将是一个非常简单的模板，不会延长你将只包含：

{% crispy DummyForm %} 

请注意I保持简单的代码，你必须在populate_form视图中为pk添加验证，并处理未通过AJAX调用到populate_form（例如：长时间打开页面的用户，会话过期并单击编辑按钮）