@RequestScoped Bean not working as expected? (JSF)

Question

I have a JSF page where I can add or delete "planes" in my database (JBDC). To help with that I have two beans (Both @RequestScoped), one "controller" and one "backing bean".

Here is the JSF page:

And with some inputs:

After inputting info and adding a photo, the "airplane" is added to my page, and I reload the page.

Here is how the page looks after submitting:

My issue here is that, the input textfields gets "populated" from the bean with the info, and also the delete plane field gets populated with the airplane id. I want these fields to be empty after refreshing, and thats why I thought using @RequestScoped would be useful. Also, If I try to refresh the page from my web browser, it just tries to resend the form.

How can I avoid the fields being populated with data from the bean?

Also, here is bean code:

@Named
@RequestScoped
public class AddAirplaneCtrl implements Serializable{

    @Inject
    private FlightModel flightModel;

    private ListAirplaneBB listAirplaneBB;

    protected AddAirplaneCtrl(){
        ;
    }

    @Inject
    public void addListAirplaneBB(ListAirplaneBB listAirplaneBB){
        this.listAirplaneBB = listAirplaneBB;
    }

    public String addPlane(){

        listAirplaneBB.setError(null);
        listAirplaneBB.setMessage(null);

        if(failed any of the validation parts){
            return /some/site?faces-redirect=false";
        }

        //add plane
        return /some/site?faces-redirect=true";
    }
}

And the Backing Bean:

@Named
@RequestScoped
public class ListAirplaneBB implements Serializable{

    @Inject
    private FlightModel flightModel;

    //private variable fields

    public List<Airplane> getAllPlanes(){
        return flightModel.getAirplaneList().findAll();
    }

    public int getTotalPlanes(){
        return getAllPlanes().size();
    }

    //GETTERS and SETTERS

}

And finally my jsf page:

<div class="contbox">
                    <h3>
                        <h:outputLabel value="Edit Planes" />
                    </h3> 
                    <c:if test="#{not empty listAirplaneBB.error}">
                        <div class="alert alert-danger" 
                             id="success-alert">
                            <span class="glyphicon glyphicon-remove" /> 
                            <h:outputText value="#{listAirplaneBB.error}" />
                            <button type="button" 
                                    class="close" 
                                    data-dismiss="alert">
                                <h:outputLabel value="x" />
                            </button>
                        </div>
                    </c:if>
                    <c:if test="#{not empty listAirplaneBB.message}">
                        <div class="alert alert-success">
                            <span class="glyphicon glyphicon-remove" /> 
                            <h:outputText value="#{listAirplaneBB.message}" />
                            <button type="button" 
                                    class="close" 
                                    data-dismiss="alert">
                                <h:outputLabel value="x" />
                            </button>
                        </div>
                    </c:if>

                    <h4>Add A Plane</h4>                     
                    <h:form enctype="multipart/form-data">
                    <table id="addtable" 
                           class="table">
                        <thead>
                            <tr>
                                <th>
                                    <h:outputLabel value="Plane Make" />
                                </th>
                                <th colspan="1">
                                    <h:outputLabel value="Plane Model" />
                                </th>
                                <th colspan="1">
                                    <h:outputLabel value="Plane Seats" />
                                </th>
                                <th colspan="1">
                                    <h:outputLabel value="Plane Photo" />
                                </th>
                            </tr>
                        </thead>
                        <tr>    
                            <td>  
                                <h:inputText value="#{listAirplaneBB.make}">
                                </h:inputText>
                            </td>
                            <td>
                                <h:inputText value="#{listAirplaneBB.model}">
                                </h:inputText>
                            </td>
                            <td>
                                <h:inputText value="#{listAirplaneBB.seats}">
                                </h:inputText>
                            </td>
                            <td>
                                <h:inputFile value="#{listAirplaneBB.file}" >
                                </h:inputFile>
                            </td>       
                            <td>
                                <h:commandButton value="Add Plane" 
                                                 class="btn btn-primary" 
                                                 action="#{addAirplaneCtrl.addPlane()}" >
                                </h:commandButton>
                            </td>
                        </tr>
                    </table>
                    </h:form>                 
                    <h4>Delete Plane</h4>

                    <h:form>
                        <h:panelGrid columns="3" class="table">
                            <h:outputLabel value="Plane ID" />
                            <h:inputText value="#{listAirplaneBB.airPlaneId}"/>
                            <h:commandButton value="Delete" 
                                             class="btn btn-primary"
                                             action="#{addAirplaneCtrl.deleteAirplane}" >
                            </h:commandButton>
                        </h:panelGrid>
                    </h:form>
                </div>

jklee jklee · Accepted Answer · 2016-12-03T15:55:12

Your browser cache the inputs.

JSF 2.2 Solution

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
...
    <f:passThroughAttribute name="autocomplete" value="off"/>
...

jQuery Solution:

<h:form styleClass="form">...</h:form>

<script>
    $(function(){
        $(".form").attr("autocomplete", "off");
    });
</script>

You can find more information here.

@RequestScoped Bean not working as expected? (JSF)

1 Answers