JSF2：提交 AJAX 表单答案

【问题标题】：JSF2: Submit AJAX formJSF2：提交 AJAX 表单
【发布时间】：2023-04-06 22:49:02
【问题描述】：

我有一个页面通过 AJAX 分页有一个表格列表，都是自定义的。分页工作正常，但 Enter 键清除表单输入的值而不是提交。我的提交按钮创建了一个 AJAX 帖子，导致表格重新执行和重新呈现。

如何确保所有表单输入都处理 Enter 按钮并提交 AJAX 表单？

这是我的提交按钮：

<f:ajax execute="@form" render=":formlistproposta" onevent="showProgress">
  <h:commandLink styleClass="link" value="#{msg.menu_search_top_all}"    
                 actionListener="#{propostaBean.search}" onclick="clearForm();">
  </h:commandLink>
</f:ajax>

如何确保每当我在任何表单输入上按 Enter 键时，我的 AJAX 都会被提交？

【问题讨论】：

标签： java ajax jsf forms jsf-2

【解决方案1】：

我已经通过jQuery解决了，类似于@mmanco的解决方案：

$('form input[type=text]').die('keydown').keydown(function(e){
    if(e.keyCode == 13 ) {
        $('form\\:submitButton').click();
        return false;
    }
});

【讨论】：

【解决方案2】：

首先你描述的行为是正确的。在一个简单的 HTML 页面中，当按下表单内的 Enter 键时，将拾取并单击第一个按钮。在您的情况下，<input type="reset"/> 按钮可能是表单中的第一个按钮。

我使用prototype 来实现这一点。

这是一个在按下 Enter 键时处理表单提交的脚本示例：

var FormSubmissionHandler = Class.create({
    initialize: function(formId, submitterId) {
        this.form = $(formId);
        this.submitter = $(submitterId);
        Event.observe(this.form, 'keypress', this.onKeyPress.bindAsEventListener(this));
    },

    onKeyPress: function(event) {
        var code = event.keyCode;
        var element = Event.element(event);
        if(code == Event.KEY_RETURN) {
            var nodeName = element.nodeName;
            var isSelect = nodeName == 'SELECT';
            var isTextArea = nodeName == 'TEXTAREA';

            if(!isSelect && !isTextArea) {
                Event.stop(event);
                this.submitter.click();
            }
        }
    }
});

【讨论】：

虽然您的代码看起来是正确的，但由于使用 actionListener="#{propostaBean.search}" 指定的 JSF 动作侦听器，它不能应用于我的示例。在您的情况下，您不会调用动作侦听器，只需提交表单
您的 actionListener 将被此脚本调用。请注意，在这种情况下，您应该指定提交者 ID，它是您的 commandLink。这将通过 f:ajax 调用附加的事件函数。