Ajax not function on first submit, after page refresh only result will refresh

Question

I am using Java EJB with JSF.

What I doing is just a simple search result from database and display it on a table using JSF with ajax. But why when first submitting, the result is not appear. And second time only the result will appear.

Below is my JSF page code

<h:form id="wholeForm">
    <p:panelGrid id="resultTable" styleClass="result_table1" >
        <p:row>
            <p:column>
                <div align="center" id="font-size1">  
                    <h:selectOneRadio value="#{scanResult.typeOfScan}">
                        <f:selectItem itemValue="Carrier" itemLabel="Carrier"></f:selectItem>
                        <f:selectItem itemValue="Slot" itemLabel="Slot"></f:selectItem>
                        <f:selectItem itemValue="HD" itemLabel="HD"></f:selectItem>
                        <p:ajax event="change"></p:ajax>
                    </h:selectOneRadio>
                    Scan:  <p:inputText  styleClass="searchField" id="counter" value="#{scanResult.serialNumber}" a:autofocus="true">
                        <p:ajax  event="keydown" update="wholeForm" onstart="if (event.keyCode != 13) { return false;}"  listener="#{scanResult.checkResult()}" />

                    </p:inputText>
                    <br/><br/>
                </div>
            </p:column>
        </p:row>
    </p:panelGrid>

    <p:panelGrid id="resultTable1" styleClass="result_table1" rendered="#{not empty scanResult.scanResultCarrier}" >

        <c:forEach  items="#{scanResult.scanResultCarrier}" var="result" >  
             <!-- ..do something and call out result -->
                </p:column>
            </p:row>
        </c:forEach>
    </p:panelGrid>
</h:form>

And my managed bean is as below

@Named(value = "scanResult")
@SessionScoped
public class scanResult implements Serializable {

    //Some code here

    public void checkResult() {
        scanResultCarrier = new ArrayList<>();
        scanResultSlot = new ArrayList<>();

        System.out.println("checking");
        if (typeOfScan.equals("Carrier")) {
            System.out.println("Serial " + serialNumber);
            scanResultCarrier = scanresultcarrierFacade.searchResultCarrier(serialNumber);
            System.out.println(scanResultCarrier.size());
        } else if (typeOfScan.equals("Slot")) {
            scanResultSlot = scanresultslotFacade.searchResultSlot(serialNumber);
        } else if (typeOfScan.equals("HD")) {

        } else {

        }
        serialNumber = "";
    }
}

I use System.out.println(lsitofresult.size()); to print out my result and the result is not blank. Mean that I successful retrieve my result from database.

But my result table not able to show out after I click on enter.
Then I notice that my url is as below

http://localhost:8080/outgoingScanSystem-war/faces/index.xhtml;jsessionid=8b6cefa932ff60984607ee38ec13

And after I refresh my page, the result will appear again.
And my url change to :

http://localhost:8080/outgoingScanSystem-war/faces/index.xhtml

May I know why? Is it related to URL? I have no idea where should I start my troubleshoot. Anyone can give me some guideline?

https://stackoverflow.com/questions/9010734/why-do-i-need-to-nest-a-component-with-rendered-some-in-another-component-w/ — Ashish Mathew, Dec 12 '17 at 09:07

score 0 · Accepted Answer · answered Dec 12 '17 at 11:07

I see some problems here. First of all, you're using the session scope while your managed bean should be view scoped (there's no reason to use the session here, see the link below). That's the cause why your results are getting displayed when you refresh the page.

Second, I'd rather put the search results out from the form. I see no reason for them to be in the same form of the search itself. Then, when performing a searh you should only update the result list:

<p:ajax event="keydown" update="resultTable1" onstart="if (event.keyCode != 13) { return false;}" listener="#{scanResult.checkResult()}" />

Third, as you're using Primefaces, I encourage you to take a look to its p:remoteCommand tool in order to perform ajax-based calls to the beans from your JS code directly. This way you should avoid your second problem, which seems to be that you're preventing the standard form sending on the ajax start event (which might not even get called). You could do something like this:

<p:remoteCommand name="search" update="resultTable1" actionListener="#{scanResult.checkResult}" />
<p:inputText styleClass="searchField" id="counter" value="#{scanResult.serialNumber}" 
    a:autofocus="true" onkeypress="if (event.keyCode != 13) {search(); return false;}">
    <!-- Update the input text value in the bean for each pressed key -->
    <p:ajax event="keydown" />
</p:inputText>

See also:

Ajax not function on first submit, after page refresh only result will refresh

1 Answers1