使用django创建弹出登录/注册页面

时间:2015-09-02 07:46:39

标签: javascript html django python-2.7 django-forms

您好我是django的新手,我想为我的登录/注册屏幕为我的django应用程序创建一个弹出窗口。单击#modal类是没有响应的,因此弹出窗口不起作用。请帮助,因为我探索的所有结果都是php,我不知道如何同步它django。

提前感谢您的帮助。

以下是附加的代码:

model.py文件:

class UserProfile(models.Model):
    user = models.OneToOneField(User)

    website = models.URLField(blank=True)
    picture = models.ImageField(upload_to='profile_images', blank=True)

    def __unicode__(self):
        return self.user.username

view.py文件:

def register(request):
    context = RequestContext(request)
    registered = False
       if request.method == 'POST':
        user_form = UserForm(data=request.POST)
        profile_form = UserProfileForm(data=request.POST)
        if user_form.is_valid() and profile_form.is_valid():
            user = user_form.save()
            user.set_password(user.password)
            user.save()
            profile = profile_form.save(commit=False)
            profile.user = user
            if 'picture' in request.FILES:
            profile.picture = request.FILES['picture']
            profile.save()
            registered = True
            else:
            print user_form.errors, profile_form.errors
    else:
        user_form = UserForm()
        profile_form = UserProfileForm()
        return render_to_response(
            'll/index.html',
            {'user_form': user_form, 'profile_form': profile_form, 'registered': registered},
            context)

forms.py文件:

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())

    class Meta:
        model = User
        fields = ('username', 'email', 'password')

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ('website', 'picture')

index.html文件:

<section id="modal" class="modal fade">
    <div class="modal-body">
        {% if registered %}
        <strong>Thank you for registering!</strong>
        <a href="../ll/">Return to the homepage.</a><br />
        {% else %}
        <strong>Register Here!</strong><br />

        <form id="user_form" method="post" action="../ll/"
                enctype="multipart/form-data">
            {% csrf_token %}
            {{ user_form.as_p }}
            {{ profile_form.as_p }}
            <input type="submit" name="submit" value="Register" />
        </form>
        {% endif %}
    </div>
</section>

<script>
$(function() {
    $( "#modal" ).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() {
            $( "#modal" ).dialog( "open" );
        });
});
</script>

0 个答案:

没有答案