wicket 用例：带有一些积极反馈的表单，例如忘记密码请求答案

【问题标题】：wicket use-case: form with some positive feedback, e.g. forgot-password-requestwicket 用例：带有一些积极反馈的表单，例如忘记密码请求
【发布时间】：2023-03-23 08:12:01
【问题描述】：

使用 wicket 生成一些积极反馈信息的表单的最佳做法是什么？

示例：我有一个表单，用户可以在其中请求链接以更改他忘记的密码。用户会将此链接发送到他给定的电子邮件地址（像往常一样）。

如果用户在表单中输入他的（有效）电子邮件地址并按下提交按钮，我想显示一个积极的反馈消息，例如：“更改密码的邮件将发送到您的邮件地址”。

我看到以下选项可以做到这一点：

使用此消息的反馈面板（作为“信息”），但使用表单的反馈面板，表单仍然存在（并且可能处于活动状态），这不太好......
重定向到只显示此消息的页面。仅针对此消息的新页面不是很“类似检票口”，是吗？
使用模式窗口。（但在这种情况下，这不适合我的设计。）

有什么想法吗？蒂亚！

【问题讨论】：

标签： wicket forms

【解决方案1】：

我认为这是关于你的设计愿景，而不是检票口。

1) 在我们的应用程序中，我们通常使用模态窗口作为“密码恢复”表单，当用户提交此表单时，模态窗口将关闭并出现通过 ajax 调用的 javascript div（类似于另一个窗口，但具有静态）。 IE。我们的基本页面 html 上有这样的 div：

<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，您必须将您提交的 Button 替换为需要覆盖 onClick(AjaxRequestTarget target) 方法的“AjaxButton”。在这种方法中，您可以执行以下操作：

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

别忘了设置form 和successLabel .setOutputMarkupPlaceholderTag (true)。

3）如果您不想使用这种方法之一 - 我看到的唯一方法是在您的表单中向用户询问电话号码并在提交后向他发送短信：D

【讨论】：

我使用类似的方法:)