提交后清除JSF表单input值
如果有表单,并且有一个文本框和一个button,那么在提交表单之后如何清除文本框的内容?
<h:inputText id="name" value="#{bean.name}" /> <h:commandButton id="submit" value="Add Name" action="#{bean.submit}" />
在文本框中input值并提交后,该值仍显示在文本框中。 一旦提交,我需要清除文本框的内容。 我怎样才能做到这一点?
你可以从提交表单时调用的Bean方法中清除表单;`
private String name; private String description; private BigDecimal price; /*----------Properties ------------*/ /*-----Getter and Setter Methods---*/ public void save()throws SQLException{ String sql = "INSERT INTO tableName(name,description,price) VALUES (?,?,?)"; Connection conn = ds.getConnection(); try { PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setString(1, getName()); pstmt.setString(2, getDescription()); pstmt.setBigDecimal(3, getPrice()); pstmt.executeUpdate(); } catch (SQLException e) { e.getMessage(); e.toString(); }finally{ conn.close(); clear(); } }//End Save Method public void clear(){ setName(null); setDescription(null); setPrice(null); }//end clear`
请注意,save方法的所有操作完成后,将使用save方法调用clear()方法。 作为选项,只有在方法操作成功时才可以执行清除操作…下面的方法放置在ProductController类中…
public String saveProduct(){ try { product.save(); } catch (SQLException e) { e.printStackTrace(); } return null; }
来自view / jsp的方法调用如下所示:
<h:commandButton value="Save" action="#{productController.saveProduct}"/>
您可以清空在呈现响应时不应重绘的托pipebean的属性。 这可以使用类似于下面发布的代码片段的代码完成:
private String name; public String getName(){return name;} public void setName(String name){this.name=name}; public String submit() { //do some processing ... // blank out the value of the name property name = null; // send the user back to the same page. return null; }
当前行为的原因可以在JSF运行时如何处理请求中find。 所有对视图的JSF请求都按照JSF标准的请求 – 响应生命周期进行处理 。 根据lifecyle,在执行应用程序事件( DataForm.submit
)之前,托pipebean内容将使用来自请求的值(即,设置DataForm.Name
的值)更新。 当页面在“渲染响应”阶段中渲染时,bean的当前值用于将视图渲染回用户。 除非应用程序事件中的值发生更改,否则该值始终是从请求中应用的值。
介绍
有几种方法来实现这一点。 天真的方法是简单地清空后台bean中的字段。 疯狂的方法是抓住JS / jQuery的工作,这样做后,提交或甚至在页面加载。 这些方式只引入不必要的代码,并表示思维/devise问题。 所有你想要的只是一个新的请求/页面/视图/豆开始。 就像你会得到一个GET请求一样。
POSTredirect消息GET
因此,最好的方式就是在提交之后发送redirect。 您可能已经听说过它: POST-Redirect-GET 。 在POST请求(表单提交)后,它将为您提供全新的GET请求,完全按照您的预期进行。 这还有一个额外的好处,即当用户以后无意中按下F5并忽略浏览器警告时,以前提交的数据不会被重新提交。
有几种方法可以在JSF中执行PRG。
-
只需使用
faces-redirect=true
查询string返回相同的视图。 假设一个/page.xhtml
,你可以在操作方法中这样做:public String submit() { // ... return "/page.xhtml?faces-redirect=true"; }
如果您仍然在浏览JSF 1.x的导航案例,那么就需要将
<redirect/>
添加到相关的导航案例中。 另请参见如何使用导航规则进行redirect 。 -
为了使其更加可重用,您可以编程方式获取视图ID:
public String submit() { // ... UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot(); return view.getViewId() + "?faces-redirect=true"; }
无论哪种方式,如果您已经查看了需要保留在请求URL中的参数,那么在结果中附加
&includeViewParams=true
。 另请参阅在JSF表单提交上保留GET请求查询string参数 。 -
如果您正在使用一些在JSF上下文之外运行的URL重写解决scheme,那么您最好抓取当前的请求URL(使用查询string),并使用
ExternalContext#redirect()
redirect到这个。public void submit() throws IOException { // ... ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext(); StringBuffer requestURL = ((HttpServletRequest) ec.getRequest()).getRequestURL(); String queryString = ((HttpServletRequest) ec.getRequest()).getQueryString(); ec.redirect((queryString == null) ? requestURL.toString() : requestURL.append('?').append(queryString).toString()); }
这只是一个混乱,真的应该重构到一些实用类。
请求/查看范围的bean
请注意,这一切只能与请求或视图范围的bean结合使用。 如果你有一个会话范围的bean绑定到表单,那么这个bean就不会从头开始重新创build。 你还有另一个需要解决的问题。 将其分割成一个较小的会话范围,一个用于会话范围的数据和一个视图范围的数据。 另请参见如何select正确的bean作用域?
面对消息
如果您的脸部信息显示为成功操作的结果,则只需将其设置为闪光信息即可。 另请参阅如何在redirect页面中显示脸部信息 。
public String submit() { // ... FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(clientId, message); context.getExternalContext().getFlash().setKeepMessages(true); return "/page.xhtml?faces-redirect=true"; }
阿贾克斯
只有当碰巧有一个F5总是触发一个新的GET请求的ajax-only页面时,那么在action方法中简单地删除模型字段应该不会造成太大的损害。
也可以看看:
- 如何在JSF中导航? 如何使URL反映当前页面(而不是以前的页面)
- 用于双重提交预防的纯Java / JSF实现
你可以用jQuery来完成。
我有类似的问题。 我需要清除popup窗口的forms。
<rich:popupPanel id="newProjectDialog" autosized="true" header="Create new project"> <h:form id="newProjectForm"> <h:panelGrid columns="2"> <h:outputText value="Project name:" /> <h:inputText id="newProjectDialogProjectName" value="#{userMain.newProject.projectName}" required="true" /> <h:outputText value="Project description:" /> <h:inputText id="newProjectDialogProjectDescription" value="#{userMain.newProject.projectDescription}" required="true" /> </h:panelGrid> <a4j:commandButton id="newProjectDialogSubmit" value="Submit" oncomplete="#{rich:component('newProjectDialog')}.hide(); return false;" render="projects" action="#{userMain.addNewProject}" /> <a4j:commandButton id="newProjectDialogCancel" value="Cancel" onclick="#{rich:component('newProjectDialog')}.hide(); return false;" /> </h:form> </rich:popupPanel>
jQuery代码:
$('#newProjectForm').children('input').on('click', function(){$('#newProjectForm').find('table').find('input').val('');});
我添加了一个代码片段,如何在这里为JSF 2recursion地重置当前ViewRoot的所有值: 重置表单中的所有字段
这适用于显示validation错误的提交表单以及表单中新input的值。