Question

我正在使用p：inputText，我的要求是触发一个javascript函数，这将更新支持bean searchField

<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />

<p:remoteCommand name="resetSearch" actionListener="#{searchBean.resetSearch}" process="@this" />

这是我的javascript函数。我使用firebug来查找inputText元素的id和那个页面：j_idt18：searchForm：j_idt20_input。 Id肯定是正确的

$("#page:j_idt18:searchForm:j_idt20_input").change(function() { 
    alert("Its here");
    if(!this.value) {
       resetSearch();
       } 
});

它对我来说很好，但是当我编辑我的搜索字段时，通过添加或删除然后不会触发警报。当用户使用退格按钮使搜索字段为空时，主要要求是调用backing bean。

我检查了inputText元素的id并写了一个javascript函数

我的问题是，如何编写javascript / jquery函数，该函数会不断监视searchfield中的任何更改（p：inputText）。

Answer 1

根据jquery选择器Docs：

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为文字作为名称的一部分，必须使用两个反斜杠进行转义：\\。例如，id =“foo.bar”的元素，可以使用选择器$（“＃foo \ .bar”）

因此，您需要转义ID

中的特殊字符

$("#page\\:j_idt18\\:searchForm\\:j_idt20_input").change(function() { 
  alert("Its here");
  if(!this.value) 
    resetSearch();
});

或使用属性equals选择器来定位具有特殊字符的元素：

$("[id='page:j_idt18:searchForm:j_idt20_input']").change(function() { 
  alert("Its here");
  if(!this.value)
     resetSearch();
});

Answer 2

无需明确编写javascript / jquery，您可以将p:ajax用作以下要求：

  <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" 
     value="#{cc.attrs.queryProperty}" >        
        <p:ajax event="blur" listener="#{searchBean.resetSearch}" />
    </p:inputText>

只要用户输入并转到下一个组件，

事件就会触发。

如何处理p：inputText更改事件

2 个答案: