jquery - 如何使用 jquery-ui 和 Django 创建模式登录表单

Question

我正在编写一个 django Web 应用程序并使用 jquery-ui 作为用户界面。我正在使用 django-registration 来处理用户注册。

基本上，我想做的是，我希望登录页面成为一个模式对话框，而不是有一个单独的登录页面，以便您单击一个链接，如果您需要登录，则会弹出一个窗口出现，您可以从那里登录。对于这部分，我使用 jquery-ui modal form ，并且基本上只是显示通常隐藏的登录表单。

但是，只有当页面的 url 如下所示时，我才能使其正常工作:

url(r'^$',
        auth_views.login,
        {'template_name': 'index.html'}),

由于我希望每当用户想要执行需要登录的操作时都会弹出登录模式窗口，因此我将在多个页面上需要它。但我不想让所有的网址都像上面这样。

我在解决该问题的网站上看到了另一个问题:Django authentication and Ajax - URLs that require login但我不完全理解答案。我对 Django 和 javascript 还很陌生，所以想知道是否有人可以提供更多指导？

这是“index.html”中表单的部分:

<div id="dialog-form" title="LOGIN">    
        <form method="post" action="?next={{ next|default:"/" }}">
        {% csrf_token %}
        <dl>
        <dt><label for="id_username">Username:</label>{% if form.username.errors %} <span class="error">{{ form.username.errors|join:", " }}</span>{% endif %}</dt>
        <dd>{{ form.username }}</dd>
        <dt><label for="id_password">Password:</label>{% if form.password.errors %} <span class="error">{{ form.password.errors|join:", " }}</span>{% endif %}</dt>
        <dd>{{ form.password }}</dd>
        <dt><input type="submit" value="Log in" /></dt>
        </dl>
        </form> 
    </div>
    <button id="login">LOGIN</button>

这是 JavaScript:

<script>
$(function() {

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 500,
        width: 550,
        modal: true,
        buttons: {
            Close: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#login" ).click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>

预先感谢您的帮助。

Answer 1

可以使用jqueryui作为登录模态框；我已经用过了。检查这个http://jsfiddle.net/paragr/LNBEY/
但是你为什么不试试这个呢 https://github.com/kylefox/jquery-modal或http://www.bitrepository.com/ajax-login-modal-box.html