ポップスとして使用するとDjangoフォームをクライアント側に配置する必要があります

Question

私の質問は例で最もよく説明されています。 生徒のテーブルを考えてみましょう。生徒をクリックすると、その生徒の包括的な情報がポップアップで表示されます。まず、ユーザーが学生をクリックするたびに、私はAjax経由でGETリクエストを行い、取得したレスポンスをポップアップに入力しました。 JSコードで

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 

そして：

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

このコードの問題は、ポップアップが遅れで表示されていることである言い換えれば、私はこのような何かをしました。まあ、はい、半分ですが、私は応答が瞬時になるようにしたいと思います。特に、ユーザーのインターネットが遅い場合、ユーザーエクスペリエンスはさらに悪化します。

ここでベストプラクティスは何ですか？代わりに私には次のようなものがあります：メインページ（生徒用テーブルを含む）をレンダリングするときに、空のフォームを渡すか（Djangoのdocがmy_form = MyForm()を実行してアンバウンドフォームを呼び出すとき）、それからJavaScriptを入力します学生に。このアプローチは超高速のポップアップレンダリングをもたらしますが、アプローチはDRYではなく、ForeignKeyフィールドの場合は非常に厄介です。このアプローチは一般的には迷惑行為です。

Answer 1

JavaScriptを使用してフォームにデータを入力する醜いです。私はこれを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があまり掛かりません。