用jQuery覆盖JSF组件方法

我想用jQuery覆盖p:inputText（commentInput）组件的onblur()和onfocus()方法。但我想我很难得到这个组件的固定Html ID。到目前为止我尝试过：

jQuery(document).ready(function() {
     $(document.getElementById("[#{p:component('commentInput')}]")).onblur(function() {
        $(this).css({'background-color':'#DFD8D1'});
     });
});

或者：

jQuery(document).ready(function() {
     $("[id='#{p:component('commentInput')}']").onblur(function() {
        $(this).css({'background-color':'#DFD8D1'});
         });
});

两者给出了相同的结果：CCD_ 3。

Xhtml代码类似于此：

<h:form id="dtForm">
<p:outputPanel id="dataTablePanel">
    <p:dataTable id="dataTable">
        <p:column id="column">
            <p:panel>
                <p:inputText id="commentInput">
                </p:inputText>
            </p:panel>
        </p:column>
    </p:dataTable>
</p:outputPanel>
</h:form>

当我将inputText组件与一起使用时，我又遇到了一个问题

<p:inputText id="commentInput" onkeypress="if (event.keyCode == 13) {onchange(); return false;}" required="#{not empty statusBean.newComment}">
    <f:ajax event="change" listener="#{statusBean.test}" />
</p:inputText>

它以意想不到的方式引发事件；假设光标在inputText中，并键入"，然后单击页面中的其他位置，组件会在不希望执行此操作的情况下触发ajax事件。我认为此组件不适合像在Facebook或"中那样将注释添加到状态。

这里有两个问题。首先，正如Anthony Grist在回答中所说，定义模糊是由blur()而不是onblur()完成的。JSF中的id包含作为id分隔符的:符号，因此需要转义这些:符号。Primefaces对此有内置功能，在jQuery:中也添加了#符号

jQuery(PrimeFaces.escapeClientId("#{p:component('commentInput')}")).blur(function () {
  // your code here...
});

另一方面，为什么复杂化，p:inputText具有onblur属性。有了它，您可以定义要执行的javascript回调。它被用作标准HTML属性：

<p:inputText onblur="myFunction()"/>

用于绑定blur事件处理程序的jQuery函数只是.blur()，而不是.onblur()。此外，在第一个示例中，您混合了对jQuery函数的调用和对本机JavaScriptdocument.getElementById()的调用。

以下内容应该有效：

$("##{p:component('commentInput')}")).blur(function() {
    $(this).css({'background-color':'#DFD8D1'});
});

第一个#是jQuery选择器的一部分，第二个是（我假设）JSF代码的一部分以获得该元素的正确id。我不能保证服务器端不会出现解析问题（我没有JSF的经验），但我希望它能正常工作。

只需在<p:inputText>中使用widgetVar属性，并使用以下id:调用组件

<p:inputText id="commentInput" widgetVar="txtCommentInput" ... >
...
jQuery(document).ready(function() {
     txtCommentInput.blur(function() {
        $(this).css({'background-color':'#DFD8D1'});
     });
});

请注意，不要将id和widgetVar属性设置为相同的值：http://forum.primefaces.org/viewtopic.php?f=3&t=18830#p59600

几个小时后，我找到了正确的方法，我认为所有其他建议都对常规情况有用，但我的建议很特别，因为DataTable组件，它对其他解决方案造成了问题，所以我找到了一个更贪婪的解决方案：

$(window).bind("load", function() {
    var rowSize = '#{bean.numOfRows}';
    for (var i=0;i &lt; rowSize;i++)
    {
        var rowIndex=i;
        var str = 'dataTableForm' + ':dataTable:' +  rowIndex + ':commentInput';
        var element = $(document.getElementById(str));
        element.blur(function () {
           $(this).css({'box-shadow': '0 0 5px #EB2F28'});
           $(this).css({'background-color':'#DFD8D1'});
        });
     }
});

函数的第一行确定页面加载后的执行情况。然后，我对dataTable中的所有inputText组件重复相同的过程。var str具有每个inputText分量的固定ID的值，其余；只是CSS。

但我的情况比这更糟。我做了一个ajax更新来确定css值，即使在执行页面加载时，也会覆盖javascript函数值。执行顺序如下：

--Page Load
----Function Executes
------Ajax Call

能够在决赛中执行功能。我将函数头更改为：function afterLoad()，并通过以下方式在ajax更新程序按钮中调用它：<p:commandLink oncomplete="afterLoad()"/> and BOOM it WORKS！！！！

相关内容

最新更新

热门标签：