How do I reload fancybox iframe form with errors in Flask

问题

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 )

Here is the Jinja2 template

  {% 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 %}

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() } });

and the html that activates it is

<a class="fancybox_signin" id="sign-in" href="{{url_for('user.signin')}}">Sign In</a>

回答1:

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.

来源：https://stackoverflow.com/questions/41125245/how-do-i-reload-fancybox-iframe-form-with-errors-in-flask

标签

jquery

python

iframe

Flask

fancybox