當用作popus時，應該在客戶端填充Django表單

我的問題最好通過示例來描述。考慮學生的表格。當我點擊一個學生時，應該打開一個彈出窗口，其中包含學生的綜合信息。首先，每次用戶點擊一個學生時，我通過Ajax做了一個GET請求，然後用彈出的響應填充彈出窗口。換句話說，我做了這樣的事情：當用作popus時，應該在客戶端填充Django表單

def my_view(request): 
    if request.method == 'GET': 
     model_instance = MyModel.objects.get(id = request.POST['id']): 
     context = {'my_form': MyForm(instance = model_instance)} 

     msg = render_to_string('my_template.html', context, request = request) 
     return JsonResponse({'object': msg}, safe = False) 
    else: 
     # POST-request for saving input data to db

然後在JS代碼：

$.get(....., function(response){ 
    $(response.object).modal('show'); 
}

這段代碼的問題是，彈出會出現一個延遲。嗯，是的，這是半秒鐘，但我希望這個迴應是即時的。特別是，如果用戶的網絡速度較慢，用戶體驗更差。

這裏最好的做法是什麼？在我看來，替代方案如下：在呈現主頁面時（使用學生表格），傳遞一個空的表單（或者像Django doc調用它，通過做my_form = MyForm()來解除綁定的表單），然後在用戶單擊時用JavaScript填充它對一個學生。那麼，這種方法會產生超快速的彈出式渲染，然而這種方法並非DRY，ForeignKey字段的情況在這裏非常令人討厭，並且通常這種方法似乎是垃圾代碼

來源

2017-09-17 Edgar Navasardyan

使用JavaScript填充表單doesn不必醜陋。在使用HTML data-屬性來幫助保持清潔之前，我已經做了這樣的事情。如果你正在使用jQuery，它可能是這個樣子：

{% for student in students %} 
<div class="student" data-student-id="{{ student.id }}" data-student-first-name="{{ student.first_name }}"> 
    {{ student.first_name }} 
</div> 
{% endfor %} 

<!-- Pretend this is inside a modal --> 
{{ form.as_p }} 

<script> 
$('.student').click(function() { 
    var studentId = $(this).data('student-id'); 
    var firstName = $(this).data('student-first-name'); 
    $('#id_id').value = studentId; 
    $('#id_first_name').value = firstName; 
}); 
</script>

這假定Student.id是HiddenInput Widget。它並不需要太多的JS來給你一個很好的結果。

來源

2017-09-17 18:09:46 Franey

當用作popus時，應該在客戶端填充Django表單

回答

相關問題