JSF表单后与AJAX [英] JSF form post with AJAX
问题描述
我想下面的表单使用AJAX。因此，评论点击命令按钮后无需重新加载页面显示。有什么需要改变，使用Java服务器面临2.0？
功能：这种形式提供的inputText来定义一个话题。 pressing命令按钮后，就可以搜索关于这个话题的评论。注释显示在数据表中，如果有任何。否则的空缺的显示。
＆LT; H：格式ID =myForm的＆GT;
＆LT; H：outputLabel值=主题：为=主题/＆GT;
＆LT; H：inputText的ID =主题值=＃{commentManager.topic}/＆GT;
＆LT; H：的commandButton值=读行动=＃{commentManager.findByTopic}/＆GT;
＆LT; H：panelGroup中呈现=＃{空commentManager.comments}＆GT;
＆LT; H：的outputText值=空/＆GT;
＆LT; /小时：panelGroup中＆GT;
＆LT; H：dataTable中
ID =意见
值=＃{commentManager.comments}
VAR =发表评论
渲染=＃{非空commentManager.comments}
＆GT;
＆LT; H：列＆GT;
＆LT; H：的outputText值=＃{comment.content}/＆GT;
＆LT; / H：列＆GT;
＆LT; / H：dataTable的＆GT;
＆LT; /小时：形式GT;
您需要告诉命令按钮使用Ajax，而不是由太空牛仔证明。就这么简单的一个嵌套<一个href="http://download.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/f/ajax.html"><$c$c><f:ajax>标签里面。您需要指示它由提交整个表单执行=@表和渲染标识元素评论按渲染=意见。
＆LT; H：的commandButton值=读行动=＃{commentManager.findByTopic}＆GT;
＆LT; F：AJAX执行=@形式呈现=意见/＆GT;
＆LT; / H：的commandButton＆GT;
不要忘记，以确保您已经在＆LT; H：头＆GT; ，而不是＆LT; HEAD＆GT; 主模板，以便必要的JSF AJAX的JavaScript将被自动包含在内。
＆LT; H：头＆GT;
...
＆LT; / H：头＆GT;
此外，ID为元素评论必须是已为了能够呈现由JSF客户端进行更新（重新渲染）被JavaScript / AJAX了。所以，最好是把＆LT; H：dataTable的＆gt;在 A ＆LT; H：panelGroup中＆GT; 与该ID。
＆LT; H：panelGroup中的id =意见＆GT;
＆LT; H：dataTable的渲染=＃{非空commentManager.comments}＆GT;
...
＆LT; / H：dataTable的＆GT;
＆LT; /小时：panelGroup中＆GT;
I want the following form to use AJAX. So the comments are shown after clicking the command button and without reloading the page. What needs to be changed, using Java Server Faces 2.0?
Functionality: This form provides an inputText to define a topic. After pressing the commandButton, it is searched for comments regarding this topic. Comments are shown in a dataTable, if there are any. Otherwise Empty is shown.
<h:form id="myForm">
<h:outputLabel value="Topic:" for="topic" />
<h:inputText id="topic" value="#{commentManager.topic}" />
<h:commandButton value="read" action="#{commentManager.findByTopic}" />
<h:panelGroup rendered="#{empty commentManager.comments}">
<h:outputText value="Empty" />
</h:panelGroup>
<h:dataTable
id="comments"
value="#{commentManager.comments}"
var="comment"
rendered="#{not empty commentManager.comments}"
>
<h:column>
<h:outputText value="#{comment.content}"/>
</h:column>
</h:dataTable>
</h:form>
You need to tell the command button to use Ajax instead as demonstrated by Space Cowboy. It's as simple as nesting a <f:ajax> tag inside it. You need to instruct it to submit the whole form by execute="@form" and to render the element with ID comments by render="comments".
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax execute="@form" render="comments" />
</h:commandButton>
Don't forget to ensure that you've a <h:head> instead of a <head> in the master template so that the necessary JSF ajax JavaScripts will be auto-included.
<h:head>
...
</h:head>
Also, the element with ID comments needs to be already rendered to the client side by JSF in order to be able to be updated (re-rendered) by JavaScript/Ajax again. So best is to put the <h:dataTable> in a <h:panelGroup> with that ID.
<h:panelGroup id="comments">
<h:dataTable rendered="#{not empty commentManager.comments}">
...
</h:dataTable>
</h:panelGroup>
这篇关于JSF表单后与AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
