提交后清除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。

  1. 只需使用faces-redirect=true查询string返回相同的视图。 假设一个/page.xhtml ,你可以在操作方法中这样做:

     public String submit() { // ... return "/page.xhtml?faces-redirect=true"; } 

    如果您仍然在浏览JSF 1.x的导航案例,那么就需要将<redirect/>添加到相关的导航案例中。 另请参见如何使用导航规则进行redirect 。

  2. 为了使其更加可重用,您可以编程方式获取视图ID:

     public String submit() { // ... UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot(); return view.getViewId() + "?faces-redirect=true"; } 

    无论哪种方式,如果您已经查看了需要保留在请求URL中的参数,那么在结果中附加&includeViewParams=true 。 另请参阅在JSF表单提交上保留GET请求查询string参数 。

  3. 如果您正在使用一些在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的值。