我正在使用Bootsfaces显示模式对话框。模态对话框中有一个字段(实际上是b:inputTextarea
)和一个使用Ajax提交数据的命令按钮。我想确保用户在提交之前已经在文本字段中输入了一些内容。如果该字段为空,则不应关闭模式并且不应进行提交;如果该字段为非空,则应关闭对话框,并且提交应采用Ajax样式。
由于具有Bootsfaces 1.4.2的issue,我无法使用b:command
进行Ajax部件。我必须对h:commandButton
和f:ajax
使用标准方式。
我正在尝试解决这样的问题:
<b:form>
<!-- section that gets updated by ajax-request -->
<b:panel id="updateSection">
<h:outputText value="#{testBean.value1}" />
<b:button value="open dialog" onclick="$('.pseudoClass').modal()" />
</b:panel>
<!-- modal dialog -->
<b:modal title="model" styleClass="pseudoClass" closable="false" closeOnEscape="true">
<b:panel id="modalOutput"><h:inputText value="#{testBean.value1}" /></b:panel>
<f:facet name="footer">
<!-- cancel button -->
<b:button largeScreen="half" value="cancel" dismiss="modal" onclick="return false;" />
<!-- submit button ajax-style -->
<h:commandButton value="submit" action="#{testBean.save()}" onclick="validateModalDialog();">
<f:ajax render="updateSection" execute="@this modalOutput" onevent="closeModalDialog" />
</h:commandButton>
<!-- scripts to close & validate modal dialog -->
<h:outputScript>
function closeModalDialog(data) {
var status = data.status;
if (status === 'complete') { $('.pseudoClass').modal('hide'); }
}
function validateModalDialog() {
alert('i get called before closing dialog');
return false;
}
</h:outputScript>
</f:facet>
</b:modal>
</b:form>
脚本脚本validateModalDialog
在模式对话框关闭之前被调用,但是无论函数的返回值是(真还是假),对话框都将关闭。
我对JavaScript的了解非常有限。这就是我选择使用JSF和Bootsfaces的原因之一。但是我很确定有一种方法可以进行验证并防止对话框关闭。
使用标准组件h:commandButton
和f:ajax
时,我如何模拟Bootsfaces功能(模式对话框中文本字段的客户端验证?)>
我正在使用Bootsfaces显示模式对话框。模态对话框中有一个字段(实际上是b:inputTextarea)和一个使用Ajax提交数据的命令按钮。我想做...
确实看起来像