如何在Flask中重新加载包含错误的fancybox iframe表单 [英] How do I reload fancybox iframe form with errors in Flask
问题描述
在Flask中有一个iframe显示一个带有fancybox的登录表单，它工作正常，但是如果有错误我想重新加载表单。问题是，当我提交有错误的表单时，它会在当前iframe中加载另一个iframe。如何在当前iframe中加载表单。
In Flask have an iframe display a login form with fancybox and it works fine, but if there is an error I want to reload the form. The problem is when I submit the form with errors, it loads another iframe inside the current iframe. How do I load the form in the current iframe.
@user.route('/signin', methods=['GET', 'POST'])
def signin():
""" Login a user
"""
form = SigninForm(request.form)
if request.method == 'POST' and form.validate():
username = form.username.data
password = form.password.data
if username:
try:
user = User.objects.get( username = username )
except User.DoesNotExist:
form.username.errors = ['No such user or password']
context = {'form':form}
return render_template('sign-in.html', **context )
else:
form.username.errors = ['Enter a Username or Email address']
context = {'form':form}
return render_template('sign-in.html', **context )
if user.check_password(password):
login_user(user)
return render_template( 'close-iframe.html' )
else:
form.username.errors = ['No such user or password']
context = {'form':form}
return render_template('sign-in.html', **context )
这是Jinja2模板
{% extends 'base.html' %}
{% from "_formhelpers.html" import render_field %}
{% block body_block %}
<body>
<div class="header">
<div class="wrapper">
<div id="sign-in-show"">
<div class="signin-form">
<div class="sign-up-in-tabcont" style="display: block;">
<form id="sign-in-form">
{{ form.csrf_token }}
<div class="form-single-row">
{{ render_field(form.username, id="email") }}
</div>
<div class="form-single-row">
{{ render_field( form.password, id="password") }}
</div>
<div class="form-single-row">
{{ render_field( form.submit, value='Login') }}
</div>
<div class="form-single-row">
<p class="forget-password">
<a href="{{url_for('user.forgot')}}">Forgot Password?</a>
</p>
</div>
</form>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="header-outer"></div>
</div>
</div>
</body>
{% endblock %}
这是我在主应用程序中的javascript。它有效，除了我在iframe返回时无法更改hrame中的html
here is the javascript I have in the main application. It works, except that I cannot change the html in the iframe when it returns
function send_ajax(e){
$.ajax({ type : "POST",
cache : false,
url: "/signin",
data: $(this).serialize(),
success:function(data)
{
var box = $('.fancybox-iframe').contents().find('html');
box.html(data);
}
});
return false;
}
$("#sign-in-form").bind( "submit", send_ajax );
$('.fancybox').fancybox({ onClose: function(){ window.location.reload() } });
和激活它的html是
<a class="fancybox_signin" id="sign-in" href="{{url_for('user.signin')}}">Sign In</a>
推荐答案
经过大量实验后我终于明白了。
After lots of experiments I finally figured it out.
function send_ajax(e){
$.ajax({ type : "POST",
cache : false,
url: "/signin",
data: $(this).serialize(),
success:function(data)
{
parent.jQuery.fancybox(data);
}
});
return false;
}
$("#sign-in-form").on( "submit", send_ajax );
这只有一个问题。如果输入错误的密码两次，则不会出现第二个窗口。
There is only one problem with this. If you enter the wrong password twice, the second window does not appear.
这篇关于如何在Flask中重新加载包含错误的fancybox iframe表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
