0

我想使用 jQuery覆盖p:inputTextonblur() (commentInput) 组件的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'});
         });
});

两者都给出相同的结果：Uncaught TypeError: Object [object Object] has no method 'onblur'。

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 中并输入 sth。并单击页面中的其他位置，组件会触发 ajax 事件，而预期不会这样做。我认为这个组件不适合像在 Facebook 或某事中那样获得对状态的评论。

4

4 回答 4

3

这里有两个问题。首先，正如 Anthony Grist 在他的回答中所说，定义模糊是由blur()not完成的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()"/>
于 2013-02-18T19:53:39.800 回答
1

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

以下应该有效：

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

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

于 2013-02-18T16:56:17.537 回答
1

只需使用widgetVar您的属性<p:inputText>并使用此 ID 调用您的组件：

<p:inputText id="commentInput" widgetVar="txtCommentInput" ... >

...

jQuery(document).ready(function() {
     txtCommentInput.blur(function() {
        $(this).css({'background-color':'#DFD8D1'});
     });
});

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

于 2013-02-18T16:57:13.383 回答
0

几个小时后，我找到了正确的方法，我认为所有其他建议对常规情况很有用，但我的建议是特殊的，因为 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'});
        });
     }
});

函数的第一行决定了页面加载后的执行。然后我inputText为dataTable. var str具有每个inputText组件的固定 ID 的值，其余部分；只是 CSS。

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

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

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

于 2013-02-18T22:39:58.613 回答