Question

我使用PrimeFaces作为JSF组件库，并尝试实现一个基本和机制，允许用户查看页面上的哪些输入元素已被更改。我们的想法是挂钩onchange事件并使用Javascript设置不同的边框颜色，如下所示：

function setChangedStyle(element) {
    PrimeFaces.info('Trying to set border on element ' + element);
    var input = document.getElementById(element.id);
    if (input != undefined) {
        var borderStyle = "1px solid #eab069";
        input.style.border = borderStyle;
        PrimeFaces.info('Set border style to ' + borderStyle);
    } else {
        PrimeFaces.info('Element is undefinded');
    }
}

它适用于输入元素，如字段。

<p:inputText id="justAnIdForAField" onchange="setChangedStyle(this)" value="#{someBean.aField}" />

这里是元素的渲染输出：

<p:selectBooleanCheckbox/>

    <div id="someForm:someBooleanInput" class="ui-chkbox ui-widget">
        <div class="ui-helper-hidden-accessible">
            <input id="someForm:someBooleanInput_input"
                name="someForm:someBooleanInput_input" type="checkbox"
                onchange="setChangedStyle(this);" />
        </div>
        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
        </div>
    </div>

<p:selectOneMenu/>

 <tr class="ui-widget-content" role="row">
    <td role="gridcell" class="ui-panelgrid-cell"><label
        id="someForm:j_idt68" class="ui-outputlabel ui-widget"
        for="someForm:someSelectMenuInput_focus">SelectOne Input</label></td>
    <td role="gridcell" class="ui-panelgrid-cell"><div
            id="someForm:someSelectMenuInput"
            class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
        <input id="someForm:someSelectMenuInput_focus"
            name="someForm:someSelectMenuInput_focus" type="text"
            autocomplete="off" />
    </div>
    <div class="ui-helper-hidden-accessible">
        <select id="someForm:someSelectMenuInput_input"
            name="someForm:someSelectMenuInput_input" tabindex="-1"
            onchange="setChangedStyle(this);">
            <option value="" selected="selected">One</option>
            <option value="" selected="selected">Two</option>
            <option value="" selected="selected">Three</option>
        </select>
    </div>
    <label id="someForm:someSelectMenuInput_label"
        class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
    <div
        class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
    <div id="someForm:someSelectMenuInput_panel"
        class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
        <div class="ui-selectonemenu-items-wrapper" style="height: auto">
            <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="One">One</li>
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Two">Two</li>
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Three">Three</li>
            </ul>
        </div>
    </div>
    </div>
        <script id="someForm:someSelectMenuInput_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget_someForm_someSelectMenuInput",{id:"someForm:someSelectMenuInput",widgetVar:"widget_someForm_someSelectMenuInput"});});</script></td>
</tr>

<p:calendar/>

    <td role="gridcell" class="ui-panelgrid-cell">
    <span id="someForm:someCalendarInput">
    <input id="someForm:someCalendarInput_input" name="someForm:someCalendarInput_input" type="text"
            class="ui-inputfield ui-widget ui-state-default ui-corner-all" onchange="setChangedStyle(this)" />
    </span>

这是整个页面的HTML输出：

    <table id="someForm:j_idt65" class="ui-panelgrid ui-widget" role="grid">
<tbody>
    <tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell">
            <label id="someForm:j_idt66" class="ui-outputlabel ui-widget"
                for="someForm:someInput">Input</label>
        </td>
        <td role="gridcell" class="ui-panelgrid-cell">
            <input id="someForm:someInput" name="someForm:someInput" type="text"
                onchange="setChangedStyle(this)" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" />
                <script id="someForm:someInput_s" type="text/javascript">PrimeFaces.cw("InputText","widget_someForm_someInput",{id:"someForm:someInput",widgetVar:"widget_someForm_someInput"});</script>
        </td>
    </tr>
    <tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell">
            <label id="someForm:j_idt67" class="ui-outputlabel ui-widget"
                for="someForm:someBooleanInput_input">Boolean Input</label>
        </td>
        <td role="gridcell" class="ui-panelgrid-cell">
            <div id="someForm:someBooleanInput" class="ui-chkbox ui-widget">
                <div class="ui-helper-hidden-accessible">
                    <input id="someForm:someBooleanInput_input" name="someForm:someBooleanInput_input" type="checkbox" onchange="setChangedStyle(this);" />
                </div>
                <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                    <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
                </div>
            </div> 
            <script id="someForm:someBooleanInput_s" type="text/javascript">PrimeFaces.cw("SelectBooleanCheckbox","widget_someForm_someBooleanInput",{id:"someForm:someBooleanInput",widgetVar:"widget_someForm_someBooleanInput"});</script>
        </td>
    </tr>
    <tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell">
            <label id="someForm:j_idt68" class="ui-outputlabel ui-widget"
                for="someForm:someSelectMenuInput_focus">SelectOne Input</label>
        </td>
        <td role="gridcell" class="ui-panelgrid-cell">
        <div id="someForm:someSelectMenuInput" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
            <div class="ui-helper-hidden-accessible">
                <input id="someForm:someSelectMenuInput_focus" name="someForm:someSelectMenuInput_focus" type="text" autocomplete="off" />
            </div>
            <div class="ui-helper-hidden-accessible">
                <select id="someForm:someSelectMenuInput_input" name="someForm:someSelectMenuInput_input" tabindex="-1" onchange="setChangedStyle(this);">
                    <option value="" selected="selected">One</option>
                    <option value="" selected="selected">Two</option>
                    <option value="" selected="selected">Three</option>
                </select>
            </div>
            <label id="someForm:someSelectMenuInput_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
            <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
                <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
            </div>
            <div id="someForm:someSelectMenuInput_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
                <div class="ui-selectonemenu-items-wrapper" style="height: auto">
                    <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                        <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="One">One</li>
                        <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Two">Two</li>
                        <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Three">Three</li>
                    </ul>
                </div>
            </div>
        </div> 
        <script id="someForm:someSelectMenuInput_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget_someForm_someSelectMenuInput",{id:"someForm:someSelectMenuInput",widgetVar:"widget_someForm_someSelectMenuInput"});});</script></td>
    </tr>
    <tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell">
            <label id="someForm:j_idt72" class="ui-outputlabel ui-widget"
                for="someForm:someCalendarInput_input">Calendar Input</label>
        </td>
        <td role="gridcell" class="ui-panelgrid-cell">
            <span id="someForm:someCalendarInput">
                <input id="someForm:someCalendarInput_input" name="someForm:someCalendarInput_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all" onchange="setChangedStyle(this)" />
            </span> 
            <script id="someForm:someCalendarInput_s" type="text/javascript">$(function(){PrimeFaces.cw("Calendar","widget_someForm_someCalendarInput",{id:"someForm:someCalendarInput",widgetVar:"widget_someForm_someCalendarInput",popup:true,locale:"de",dateFormat:"dd.mm.y",showOn:"button"});});</script>
        </td>
    </tr>
</tbody>

尽管如此，我正在与其他组件斗争，以使一切正常。

<p:selectBooleanCheckbox/>和<p:selectOneMenu/>：onchange事件似乎被触发，但边框样式没有明显的变化。
<p:calendar/>：似乎没有触发onchange事件（没有日志条目），因此根本没有更改。

我从来没有遇到else - 日志＆＃39; Element未定义的声明＆＃39;。

如果我做错了什么以及我需要开始调整的地方，有人可以告诉我。

非常感谢。

Answer 1

以下Javascript函数遍历DOM树并操纵相应输入元素的边框。

该脚本适用于PrimeFaces 5.1，JSF 2.2。（Mojarra）关于Wildfly 8.2。

/**
* Changes the border color of an input element. 
* 
* @param element
*/
function setChangedStyle(element) {
var borderStyle = "1px solid #eab069";

PrimeFaces.info('Element calling this function ' + element);
var input = document.getElementById(element.id);

if (input != undefined) {
    if (input.getAttributeNode("type") != undefined) {
        PrimeFaces.info('TYPE ' + input.getAttributeNode("type").value);

        var inputType = input.getAttributeNode("type").value;
        if (inputType == 'text') {
            // Set border of inputText
            input.style.border = borderStyle;

        } else if (inputType == 'checkbox') {
            // If we deal with a checkbox, we expect the following:
            // the input element itself is located in a hidden div that is
            // located in a parent div. The parent div has two child
            // elements. 
            // The border needs to be set on the span element that resides
            // inside the div next to the hidden div.

            // Set border of checkbox
            input.parentNode.parentNode.childNodes.item(1).childNodes.item(0).style.border = borderStyle;
        } else {
            PrimeFaces.info('Unhandled input type');
        }
    } else {
        // Different input component
        if ("ui-selectonemenu".indexOf(input.parentNode.parentNode.getAttributeNode("class").value)) {
            // Set border of the selectOneMenu
            input.parentNode.parentNode.style.border = borderStyle;
        } else {
            PrimeFaces.info('Unhandled input type');
        }
    }
} else {
    PrimeFaces.info('Element is undefinded');
}

输入元素的样式边界在变动事件

1 个答案: