Partial Submit form input

Question

please I need help with an issue I have in an already made (not by me) web app

This is a Java web application, using JSF 2.2.8-02, Primefaces 6.1 and Java 8

So basically this is an extract of one of the forms in this app that are part of a wizard, I have one .xhtml document that renders each step of the wizard when I press a "Continue" button

<div class="c100 fLeft">
    <p:fieldset styleClass="col c33 fLeft}" rendered="#{type.isPerson()}">
        <p:inputText id="#{id}FirstSurname"
            value="#{formData.firstSurname}"
            required="#{required}"
            requiredMessage="Must input first name"
            title="First surname"
            disabled="#{readonly or disabled}"
            readonly="#{readonly}">
        </p:inputText>
        <p:outputLabel id="#{id}FirstSurname-lbl" for="#{id}FirstSurname" value="First Surname" />
        <p:message display="text" id="#{id}FirstSurname-msg" for="#{id}FirstSurname" />
    </p:fieldset>
    <p:fieldset styleClass="col c33 fLeft" rendered="#{type.isPerson()}">
        <p:inputText id="#{id}SecondSurname"
            value="#{formData.secondSurname}"
            required="false"
            requiredMessage="Must input second surname"
            title="Second surname"
            disabled="#{readonly or disabled}"
            readonly="#{readonly}">
        </p:inputText>
        <p:outputLabel id="#{id}SecondSurname-lbl" for="#{id}SecondSurname" value="Second Surname" />
        <p:message display="text" id="#{id}SecondSurname-msg" for="#{id}SecondSurname" />
    </p:fieldset>
</div>

What I need is to make a partial submit of the data in the first input id="#{id}FirstSurname", so that when the user refreshes the .xhtml document, the data is still there

One way of achieving this is to submit the whole form with oncomplete="submit()" added to the "Continue" button, or by adding some AJAX with a submit() action, but this conflicts with another part of the form I have some steps after (the whole form submit is done in the last step of the wizard) so I cannot do it this way

I've already done this but it's not working:

<p:inputText id="#{id}SecondSurname"
    value="#{formData.secondSurname}"
    required="false"
    requiredMessage="Must input second surname"
    title="Second surname"
    disabled="#{readonly or disabled}"
    readonly="#{readonly}">
    <p:ajax event="change" listener="#{formDataParty.secondSurname}" process="@this" update="#{id}SecondSurname"/>
</p:inputText>

I've searched 2 days through the internet with no luck, is there any way of achieving this partial submit I need?

Thanks in advance

Your listener is totally wrong and not needed. And your dynamic id assignment will only work if you have a jstl tag around it which in turn might cause some other problems. Oh and 'I tried this but it is not working' is not clear... 'not working' isn end-user description of a problem — Kukeltje, Oct 04 '19 at 17:18

Kukeltje · Answer 1 · 2019-10-03T17:11:27.577

oncomplete="submit()" is not a way to achieve partial submission (assuming it does an old school form.submit(). It is a very pre-ajax 1999 way of doing a submission when an input changes and it still submits the whole form.

Ajax with a submit() is not a right way either (assuming I 'understand what you try to achieve, lacking code examples makes this hard (where did you read this btw, maybe better to find a better tutorial about ajax), since it effectively does the same as what you suggested before.

And I'm curious what you tried with searching, entering "PrimeFaces partial submit form site:stackoverflow.com" in a search engine gives lots of useful results, as does the PrimeFaces documentation and showcase.

What you should do is split the technical submission (getting the form input from the client to the server) and the business submission (store data in backend storage or similar) in your mind and in code (use a storeDataIn...() instead of submit() is one way to do this. This automatically solves your wizard conflict.

For the actual partial submission, meaning when data from one and only one input needs to be send from the client to the server, See How to partial submit with ajax a specific jsf component?.

Partial Submit form input

1 Answers1