Geek Answers Handbook

Case of using a gate: a form with some positive feedback, for example. forgot password request

What is the best practice for making a form with a wicket, which leads to a positive feedback message?

Example. I have a form in which a user can request a link to change a forgotten password. The user receives this link sent to his email address (as usual).

If the user enters his (valid) email address in the form and clicks the submit button, I would like to show a message with positive feedback, for example: "A letter to change the password will be sent to your mailing address."

I see the following options:

  • Using the feedback panel for this message (as “information”), but using the form feedback panel, the form still exists (and can be active), and it is not so nice ...

  • Redirecting to a page that displays nothing but this message. The new page just for this post is not very "wicket-like," is it?

  • Using a modal window. (But this does not fit my design in this case.)

Any ideas? TIA!

+4
source share
1 answer

It's about your design vision, not about the gate.

1) , , , javascript div ( , ), ajax. div html:

<div class="message-dialog" id="dialog_window">
    <p id="dialog_window_p">[MESSAGE HERE]</p>
    <a class="w_close"></a>
</div>

javascript:

    //function to show div as window.
    function showNotification(message) {
        var msg = message;
        $("#dialog_window_p").html('<span>' + msg + '</span>');
        $('#dialog_window a.w_close').show();
        $("#dialog_window").fadeIn(300);
    }

    //set listener to close link. may be you could use plain onclick="..", can't remember why we done so.
    $(document).ready(function() {
        $("#dialog_window a.w_close").click( function(){
            $("#dialog_window").fadeOut(300);
        });
    });

:

.message-dialog {
    display:none;
    max-width: 600px;
    height: auto;
    padding: 30px;
    position: absolute;
    left: 35%;
    top: 35%;
    border: 1px solid #969696;
    border-radius: 4px;
    z-index: 100000;
}

, , js css. , passwordRestored = true , . , var true - var false.

2) , , AJAX, ( ). AJAX, submit Button "AjaxButton", onClick (AjaxRequestTarget target). - :

 onClick(AjaxRequestTarget target) {
    if (submitionCorrect)
    {
        form.setVisible(false);
        successLabel.setVisible (true);
        target.add (form, successLabel);        
    } else {...}
 }

form successLabel .setOutputMarkupPlaceholderTag (true).

3) - sms : D

+3

More articles:


All Articles