Как создать модальную форму входа в систему, используя jquery-ui и Django - PullRequest
Новая
       0

Как создать модальную форму входа в систему, используя jquery-ui и Django

3 голосов
/ 04 марта 2012

Я пишу веб-приложение на django и использую jquery-ui для пользовательского интерфейса. Я использую django-регистрацию, чтобы позаботиться о регистрации пользователя.

По сути, то, что я пытаюсь сделать, это вместо того, чтобы иметь отдельную страницу входа, я хочу, чтобы страница входа была модальным диалогом, чтобы вы нажимали на ссылку, а если вам нужно войти, всплывающее окно появляется, и вы можете войти оттуда. В этой части я использую модальную форму jquery-ui и в основном просто отображаю форму входа, которая обычно скрыта.

Однако я могу заставить его работать, только если URL-адрес страницы выглядит следующим образом: 

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

Поскольку я хочу, чтобы модальное окно входа в систему появлялось всякий раз, когда пользователь хочет сделать что-то, требующее входа в систему, оно понадобится мне на нескольких страницах. Но я не хочу, чтобы все URL выглядели так, как указано выше.

Я увидел еще один вопрос на сайте, который решает эту проблему: Аутентификация Django и Ajax - URL-адреса, требующие входа в систему но я не до конца понимаю ответ. Я все еще довольно плохо знаком с 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>

Заранее благодарю за помощь.

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Возможно использовать jqueryui для модального окна входа в систему; Я уже использовал это. проверить это http://jsfiddle.net/paragr/LNBEY/
Но почему бы вам не попробовать этот https://github.com/kylefox/jquery-modal или http://www.bitrepository.com/ajax-login-modal-box.html

0 голосов
/ 05 марта 2012

это не полный ответ, поскольку я никогда не делал этого раньше, но: вы хотите, чтобы форма отправляла данные запроса на отправку в auth_views.login - поэтому вы должны установить действие форм по этому адресу + некоторые следующие данные, которые будут перенаправлятьи после успешного входа.Я думаю, что поиск в Django auth soruce может помочь.На djangosites.org вы можете найти проекты с исходным кодом, например https://github.com/znc-sistemas/python-people - на каждой странице есть пример формы входа в систему - она ​​не скрыта, но не имеет большого значения.Автор использует процессор контекста для помещения формы входа в каждый контекст данных запроса.Я верю, что чтение кода может помочь вам.

...