ajax - 如何触发a h :inputHidden by JavaScript的变化

Question

我必须将三态复选框实现为具有 ajax 功能的复合组件。这是我目前所拥有的:

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:cc="http://java.sun.com/jsf/composite"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

    <cc:interface>
        <cc:attribute name="id" /><!-- necessary? -->
        <cc:attribute name="value" required="false" />
        <cc:clientBehavior name="change" event="change" targets="value" />
    </cc:interface>
    <cc:implementation>
        <div style="float: left;">
            <h:outputStylesheet library="default" name="css/checkbox.css" target="head" />
            <h:outputScript library="default" name="js/checkbox.js" target="head" />

            <div id="#{cc.clientId}" class="cc-checkbox cc-checkbox-value#{cc.attrs.value}"
                style="width: 14px; height: 14px;" onclick="checkboxToggleControl('#{cc.clientId}')"></div>
            <h:inputHidden id="value" value="#{cc.attrs.value}" />
        </div>
    </cc:implementation>
</ui:composition>

如您所见(或者没有，因为我没有包含 JS，因为这不是问题所在)，一小段 JavaScript 替换了用户视为三态复选框(null、true、false)的类。当前值由 JavaScript 存储在 <h:inputHidden> 中。

我希望能够在使用控件时注册一个 ajax 事件，以便能够将值存储在服务器上。该组件位于 <rich:extendedDataTable> 内。每次用户点击它时，该值都应该“立即”存储在数据库中。将 clientBehaviour 与 inputHidden 一起使用不起作用，因为它不支持 ajax。

1. 是否可以使用 <h:inputHidden> 对 <h:inputText> 进行 ajax 化？有什么缺点？ (我必须处理验证，不是吗？)

2. 还有其他方法可以将其实现为复合组件吗？

3. 或者，编写“真实”组件会“更容易”吗？

我没有使用 <h:selectBooleanCheckbox>，因为它无法通过 CSS 以所需的方式设置样式，还因为它不支持三态。

Answer 1

的确，<f:ajax change> <h:inputHidden> 不支持.你只会得到以下异常，因为 HtmlInputHidden class组件后面没有实现 ClientBehaviorHolder interface :

javax.faces.view.facelets.TagException: /test.xhtml @23,52 <f:ajax> Unable to attach <f:ajax> to non-ClientBehaviorHolder parent

您确实需要将其替换为 <h:inputText> .您可以使用 CSS 隐藏它 display:none; .您只需要意识到通过 JavaScript 操纵它的值不会自动触发任何 HTML DOM 事件。您需要手动触发 change通过显式调用 onchange() 事件在 HTML DOM 元素上:

var input = document.getElementById(...);
input.value = newValue;
input.onchange();

或者，如果你碰巧在整体上使用 jQuery，

var $input = $("#...");
$input.val(newValue);
$input.change(); // Or $input.trigger("change");

---

与具体问题无关，至于此处评论中的问题:

<cc:attribute name="id" /><!-- necessary? -->

仅供记录之用。 IE。当你实际使用 shortDescription 时.

<cc:attribute name="id" shortDescription="The ID of the composite." />

但除此之外它已经继承自 UIComponent 基类(如 binding 和 rendered )。