Jsf Bootsfaces inputText由于使用ajax和更新bean中的值而失去焦点
我在使用ajax的bootsfaces inputText时发现了一个问题。 我使用的是JSF2.2、BootsFaces0.8.1和Primefaces 5.3Jsf Bootsfaces inputText由于使用ajax和更新bean中的值而失去焦点,jsf,primefaces,focus,bootsfaces,ajax-update,Jsf,Primefaces,Focus,Bootsfaces,Ajax Update,我在使用ajax的bootsfaces inputText时发现了一个问题。 我使用的是JSF2.2、BootsFaces0.8.1和Primefaces 5.3 <h:head> <meta charset="UTF-8"/
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
我正在尝试在inputText字段中输入日期值。输入日期的最后一个值后,inputText应立即触发更改事件。此时,我想使用ajax调用bean方法。问题是,当我尝试输入最后一个值时,我的字段就失去了焦点,并且该方法从未被调用
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
所以我尝试了一些Primefaces,它几乎像我想要的那样工作。在这一点上,我得到了不同的问题:
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
test.xhtml-包含primefaces和bootsfaces字段的示例xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://bootsfaces.net/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
请帮我找到一个解决方案,或者解释一下我做错了什么
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
谢谢
mweber你发现引导面和素面之间有细微的区别。为了清晰起见,我建议您始终定义
process
和update
的值。就你而言
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>
我已经用BootsFaces 0.8.5对其进行了测试。您可以试用我们两天前发布的BootsFaces 0.8.5。看起来我们解决了一些关于这个问题的错误。(监听器被正确地调用)但是,我目前不确定为什么有时会首先调用backingbean方法,而且还没有时间研究。很遗憾,我现在不能提供一个完整的答案,但我可以建议尝试新版本:)而且我根本无法重现失去焦点的情况。你用的是哪个浏览器?我用的是Chrome 50.0.2661.94。我已经尝试使用Bootsfaces 0.8.5。它很好用。问题是我不能使用0.8.5,因为这个版本有不同的问题/bug。我可能会在0.8.5中问一个关于这个问题的新问题,但目前我根本没有时间。我想我会尝试一种没有ajax的解决方法,用按钮或类似的东西调用该方法。或者我再次尝试更改侦听器被调用时的阶段。请随时向我们报告该错误。我们计划很快发布另一个bug修复版本,所以我们可能会在途中修复它。我不明白你的第三个问题。当我尝试演示时,
searchB()
在每次击键时都会被调用,只要输入的数据是有效的。很抱歉我的回答太晚了。我昨天一直很忙。我试过你的例子,但对我不起作用。还是一样的问题。也许我在别的地方遇到了一个问题,使我无法使用这种方法。有没有可能有什么东西阻止了这一点?我已经添加了完整的XHTML文件-可能还有另一个细微的区别。键入时是否看到任何AJAX请求?第一个AJAX请求在数据有效后发生——在我的示例中,是在键入“12.12.1”(使用欧洲语言环境,因此使用dots)之后发生的。现在我知道了问题所在。您使用版本0.8.5进行了测试,但我使用的是版本0.8.1。我说我不能用0.8.5,但也许我可以试试。我可以给你发个私人短信,问你一些关于bootsfaces的问题吗?我会接受你的回答,因为这是这个问题的解决方案,但是对于版本0.8.1,它不适用于相同的代码。你可以通过beyondjava.de将你的消息发送给webmaster1。你是对的-我们用0.8.5修复了BootsFaces 0.8.1中的一两个AJAX问题。我不知道您的特定问题也受到影响,因为我没有尝试使用旧版本。接下来,我会更清楚地知道,并仔细地遵循您的指示:)。
<h:head>
<meta charset="UTF-8"/>
</h:head>
<h:body>
<h:form id="form">
<b:panel id="filterPanel" title="Filter properties" immediate="true" collapsed="false" collapsible="true">
<b:row>
<b:column span="12">
<b:inputText id="dateA" type="date" value="#{test.dateA}" immediate="true" class="form-control">
<f:ajax event="change" listener="#{test.searchA()}" render="@none"/>
</b:inputText>
</b:column>
</b:row>
<b:row>
<b:column span="12">
<p:inputText id="dateB" type="date" value="#{test.dateB}" immediate="true" class="form-control">
<p:ajax event="change" listener="#{test.searchB()}"/>
</p:inputText>
</b:column>
</b:row>
</b:panel>
</h:form>
</h:body>
</html>