我有一个<h:selectOneMenu>
。根据选定的内容将显示与该选择相关的众多<div>
s之一,将被隐藏了别人。每个<div>
有一些<h:inputText>
是写不同@ViewScoped
豆。一些这甚至<div>
s写在豆相同的属性。
防爆。
<div>
<h:outputLabel for="list" value="Items"/>
<div>
<h:message for="list"/>
<h:selectOneMenu id="list" value="#{bean.selectedItem}" >
<f:selectItem itemLabel="Select one"></f:selectItem>
<f:selectItems value="bean.someItemsList" />
</h:selectOneMenu>
</div>
</div>
<div id="item1">
<!-- some other input fields -->
<div>
<h:message for="item1input1"/>
<h:inputText id="item3input1" value="bean.thisIsTheSameProperty" />
</div>
</div>
<div id="item2">
<!-- some other input fields -->
</div>
<div id="item3">
<!-- some other input fields -->
<div>
<h:message for="item3input1"/>
<h:inputText id="item3input1" value="bean.thisIsTheSameProperty" />
</div>
</div>
问题:当我选择将显示<div>
(前<div id="item1">
)的项目,也有一个写入同一个bean的属性另一个隐藏<div>
(前<div id="item3">
)(前value="bean.thisIsTheSameProperty"
)和该属性与javax.validation.constraints.@NotNull
注释,即使我给一个值,这个输入字段,当我提交表单,我认为JSF还运行隐藏<div>
(通常没有输入集)。
什么样的调试过程中我看到:当形式将所需提交我看到了bean的setter方法被调用两次。第一次bean的属性将用正确的valeus设置我输入了,但第二次的setter将与空值进行调用。因此,验证将失败,因为@NotNull的。
我的假设是,JSF尝试设置bean值的两倍,一个是在显示<div>
和隐藏<div>
第二次输入字段(因为它们指向同一个bean的属性),但对于隐蔽豆有没有输入设置字段(它们是空)。
我显示/隐藏使用jQuery取决于从<div>
所选择的项目<h:selectOneMenu>
s。防爆。
$('#item1').show();
$('#item1').hide();
$('#item2').show();
$('#item2').hide();
$('#item3').show();
$('#item3').hide();
有没有办法说JSF不考虑隐藏<div>
s呢?
你似乎是假设隐藏的输入(通过CSS隐藏)没有提交到服务器。这种假设是错误的,它是一个纯HTML的东西顺便说一句,不JSF的所有相关。
例如见Stop an input field in a form from being submitted
但尽管如此,它允许客户端操作通过浏览器开发者工具来“攻击”你的应用程序。 JSF,违背了所有的大肆宣传的JavaScript UI框架是一个完整的成长“MVC framework”有建立在对client-side manipulation/tampering and CSRF, XSS为此,就需要在其他框架OWASP相关功能的保护。 (这和其他的东西,使JSF(与PrimeFaces,我OmniFaces和DeltaSpike)仍然是一个伟大的框架,以快速开发业务为主的应用程序。)
你最好使用ajax
到conditionally render one div or the other,但是当它们被定义就像你有他们,你不能'update' the divs。
也可以看看:
从@Kukeltje答案和评论从@drkunibar为我工作。我修改了一些。
实际的解决方案:
$('#myForm').submit(function() {
if($('#list').find(':selected').val() === 'itemOption1') {
$('item3').remove();
} else if($('#list').find(':selected').val() === 'itemOption3') {
$('item1').remove();
}
});
我检查,看看选择哪个选项。如果选择选项1,然后我从DOM删除div
与iditem3
,否则如果选择选项3,然后我iddiv
从DOM删除item1
。通过这种方式,结合bean.thisIsTheSameProperty
只有一个传送和值不会被覆盖。
谢谢。