How to take refresh from the full page when using the Fileupload component of the first faces

Asked

Viewed 622 times

6

I’m using the component FileUpload of the first faces in the mode="simple" and it’s run normal. But when I click the save button on a certain folder, it refreshes the whole page. There’s a way to take it out?

Below is my XHTML code:

 <h:form enctype="multipart/form-data" id="form"><p:messages id="messages" showDetail="true" autoUpdate="true"
            closable="true" />
    <h:panelGrid columns="1" cellpadding="2" style="font-size: 10px" id="panelGrid1">
        <h:panelGroup id="panelGroup1" >
            <p:outputLabel for="nomeTexto" value="Nome do Texto: " rendered="#{parametrizacaoTagsControl.tipoTag == 1}" />
            <p:inputText id="nomeTexto"
                value="#{parametrizacaoTagsControl.nomeTexto}" rendered="#{parametrizacaoTagsControl.tipoTag == 1}" />

            <p:fileUpload value="#{parametrizacaoTagsControl.file}"
                mode="simple" skinSimple="true" rendered="#{parametrizacaoTagsControl.tipoTag == 2}" label="Escolher arquivo"/>
        </h:panelGroup>

        <p:separator />
        <h:panelGrid columns="4" cellpadding="2" style="font-size: 10px"  id="panelGrid2" >
            <p:commandButton value="Incluir" ajax="false"
                actionListener="#{parametrizacaoTagsControl.upload}"
                disabled="#{!parametrizacaoTagsControl.habilitaBotoes}" />
        </h:panelGrid>
    </h:panelGrid>

</h:form>
java jsf primefaces

  • Ever tried to use ajax?

  • it’s already working, I just don’t want it to keep giving refresh on the whole screen.

  • That’s exactly what @Patrick commented on. Use ajax. Leave the ajax="true" and update the <h:form> with update="@form".

  • If I leave as true the ajax it stops working.

  • You will have to change your code. ñ just put ajax. search on google: ajax primefaces upload

1 answer

1

The only way you can maintain the status of the page (without refresh) when making a submit is via AJAX. There is no attribute ajax in the component p:fileUpload. To activate ajax you must change the mode="simple" (without ajax) to mode="advanced" (with ajax) and add the attribute fileUploadListener.

Follow the step by step:

1 - Add the method to receive the file in your bean ParametrizacaoTagsControl:

public void handleFileUpload(FileUploadEvent event) throws IOException {
        file = event.getFile();
}

2 - Alter your p:fileUpload:

<p:fileUpload fileUploadListener="#{parametrizacaoTagsControl.handleFileUpload}" 
    rendered="#{parametrizacaoTagsControl.tipoTag == 2}" mode="advanced" 
    update="fileContainer" label="Escolher arquivo" />

<h:panelGroup id="fileContainer" layout="block">
   <ui:fragment rendered="#{parametrizacaoTagsControl.file!=null}">
       <p>Nome do arquivo: #{parametrizacaoTagsControl.file.fileName}</p>
    </ui:fragment>
</h:panelGroup>

I’m using a h:panelGroup just so you can see the ajax in action. Pay close attention to the attribute update because in it you inform what will be updated.

Browser other questions tagged java jsf primefaces

You are not signed in. Login or sign up in order to post.