Disable button and show loading image while processing JSF

Question

I have this module in my webapp where i need to update come catalogs.

The idea is to disable the h:commandButton and show a h:graphicImage, both actions are supposed to happen right after the button was clicked. Finally, when the update process has ended it should do the other way, hide the h:graphicImage, enable the h:commandButton but this time also show a label h:outputText that says either 'Update Success' or 'Update Failure'.

The problem in my code is that the image and the label appear right after the process is finished and I can't find the way to do what I described above.

Where or what am I missing?,

Cheers.

    <a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
                       render="messageCatalogos actualizacionCorrecta
                       @this imgProcesando"
                       onclick="this.disabled=true;"
                       oncomplete="this.disabled=false"
                       actionListener="#{administrationBean.doImgProcesandoVisible}"
                       action="#{administrationBean.doActualizaCatalogos}"/>
    <a4j:outputPanel id="imgProcesando">
        <h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
                        url="img/imgLoading.gif"/>
    </a4j:outputPanel>
    <h:panelGroup/>
    <h:panelGroup/>
    <a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
        <h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
                      value="Actualización correcta !"/>
        <h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
                      value="Fallo la actualización !"/>
    </a4j:outputPanel>

UPDATE

My dev environment:

Mojarra 2.1.6
RichFaces 4.1.0.Final
Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)

BalusC · Accepted Answer · 2012-06-05T16:50:18.103

3

You need to show and hide the image by JS instead.

<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />

with

<a4j:commandButton ...
    onbegin="this.disabled=true; $('#formId\\:loading').show()"
    oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>

edited Jun 05 '12 at 16:50

answered Jun 05 '12 at 16:30

BalusC

1,082,665
372
3,610
3,555

Thanks for your answer. I've tried it, but the code `$('#loading').show()` does not make the image appear. Is there another way to do that? maybe something like getDocumentById, I'm don't know about JS but I've seen that's the way to get a reference to a component... – BRabbit27 Jun 05 '12 at 16:44
1

Perhaps RichFaces is running jQuery in noconflict mode. Use `jQuery('#loading')` instead of `$('#loading')`. Otherwise you can always use the good 'ol `document.getElementById('loading')` and set `.style.display='block'` and `.style.display='none'` respectively. – BalusC Jun 05 '12 at 16:45
Oh, if the image is inside a form you need to include form ID as well. It has ultimately to be the client ID of the image. Check generated HTML source. – BalusC Jun 05 '12 at 16:49
Ok, thanks, I'll check those options also. BTW, could you give me a simple explanation of the client ID, that's somewhat confuse to me. – BRabbit27 Jun 05 '12 at 16:56
1

The client ID is the JSF-generated HTML element ID. Open the JSF page in browser, rightclick and *View Source*. Locate the JSF-generated HTML `` element and look at its `id`. *That* is the client ID of the `` component. It may look like `formId:imageId` when nested inside a ``. You need to use exactly that ID in JavaScript/jQuery (simply because they don't have access to JSF source code but only to its generated HTML output). – BalusC Jun 05 '12 at 16:58
Using the old `document.getElementById('formId:loading')` with `.style.display='block'` and `.style.display='none'` respectively did the work ! THanks again. – BRabbit27 Jun 05 '12 at 17:04

Disable button and show loading image while processing JSF

1 Answers1

Linked