2016-09-17 51 views
0

私はプロジェクトに取り組んでいます。プロジェクトには対応するテンプレートとフォームのビューがたくさんあります。すべてのテンプレートは、ログインページへのリンク(メインテンプレートからそれを継承)含まれています複数のページにフォームを追加する最も良い方法は?

<ul class="options"> 
... 
<li id="login"> 
    <a class="button" href="{% url 'forum:login' %}?next={{ request.path }}">Sign in</a> 
</li> 
</ul> 

をそして、それは標準のDjangoのログインフォームをレンダリングする別のログイン・ページにつながります。

jQueryを使用して、ログインリンクがクリックされた同じページにそのフォームを作成または表示する必要があります。複数のページにフォームを追加する最も良い方法は何ですか?場合は、

$(document).ready(function() { 
$('#login').on('click', 'a', function(event) { 
    var loginUrl = $(this).attr('href'); 
    $.ajax({ 
     url: loginUrl, 
     type: 'GET'}) 
    .done(function(html) { 
     var newForm = $('<form/>', {action: loginUrl, method: 'post'}); 
     newForm.insertAfter('ul.options'); 
     newForm.append($('<input/>', 
       {type: 'hidden', name: 'csrfmiddlewaretoken', value: csrftoken})); 
     var newList = $('<ul/>'); 
     newForm.append(newList); 
     newList.append(html); 
     newList.append($('<li><input type="submit" value="Sign in"/></li>')); 
    }); 
    event.preventDefault(); 
}); 
}); 

しかし、私は疑問に思う:

ビュー:

class Login(FormView): 
... 
    def get(self, request, *args, **kwargs): 
     if request.is_ajax(): 
      form = self.get_form().as_ul() 
      return HttpResponse(form) 
     else: 
      return super(Login, self).get(request, *args, **kwargs) 

スクリプト

は、私は、HTMLを取得し、Ajaxを使って動的にフォームを作成しようとしましたそのようなタスクを完了するためのより良い方法がありますか?

また、私はjQueryを初めて使用しています。そのため、コードについてのご意見をお待ちしております。

答えて

2

あなたがして、それを配置したい場所「が含まれる」使用それ自身のテンプレートloginform.htmlにフォームを置くことができます:

{% include './path-to/loginform.html' %} 

編集: また、これはあなたのCSSのようなものを処理するための素晴らしい方法ですjavascriptエリア、nav-menuなどThe Docs

関連する問題