hide label after clicking a button richfaces

Question

I have the following piece of code in my web page. After the method in action executes a label is rendered indicating if the process was or not successful.

What I want is that label to be hidden right after the button is clicked. How can I achieve this?

I was thinking about using actionListener but I don't know if it works like:

1. Call actionListener's method
2. Re-render myView (clear my label)
3. Call action's method
4. Re-render myView (show label whether the process was successful or not)

Or maybe something in the onclick="getElementById().hide"?

Any ideas?

Cheers,

   ...
   ...
   <a4j:commandButton id="btnActualizaCubo"
                       value="Actualizar Cubo"
                       render="messageDependenciaCubo actualizacionCuboLabels @this"
                       onclick="return confirm('Las fechas seleccionadas son correctas?');"
                       onbegin="this.disabled=true;
                       document.getElementById('formActualizacionCubo:imgProcesandoCubo').style.display='block'"
                       oncomplete="this.disabled=false;
                       document.getElementById('formActualizacionCubo:imgProcesandoCubo').style.display='none'"
                       action="#{administrationBean.doActualizaCubo}"/>
   ...
    <a4j:outputPanel id="actualizacionCuboLabels" style="font-size: 14px; color: #D17100">
        <h:outputText rendered="#{administrationBean.actualizacionCuboCorrectaLabelRendered}"
                      value="Actualización correcta !"/>
        <h:outputText rendered="#{administrationBean.actualizacionCuboFalloLabelRendered}"
                      value="Fallo la actualización !"/>
    </a4j:outputPanel>
   ...

Answer 1

Use the "onclick" method to hide the text using JavaScript. An easy way to do it is wrapping your label with a div and hide/show the div in the onclick/oncomplete methods respectively. Also, remember that the generates a div to do the job, so you just have to get the HTML generated id and hide/show it. I'll let you the JS functions to hide/show a div (pretty easy, I must say):

<script type="text/javascript">
    function ocultaDiv(divId) {
        document.getElementById(divId).style.display = 'none';
    }

    function muestraDiv(divId) {
        document.getElementById(divId).style.display = 'block';
    }
</script>

<a4j:commandButton id="btnActualizaCubo"
    value="Actualizar Cubo"
    render="messageDependenciaCubo actualizacionCuboLabels @this"
    onclick="return confirm('Las fechas seleccionadas son correctas?'); ocultaDiv('myForm:actualizacionCuboLabels');"
    onbegin="this.disabled=true; document.getElementById('formActualizacionCubo:imgProcesandoCubo').style.display='block'"

oncomplete="this.disabled=false; document.getElementById('formActualizacionCubo:imgProcesandoCubo').style.display='none';muestraDiv('myForm:actualizacionCuboLabels');" action="#{administrationBean.doActualizaCubo}" />

Remember to not render your items using server calls when you can do it with plain JavaScript and save performace. Also, please add if you're using RF 3.3 or RF 4 to add a hint about that image you're using as "loading, please wait", that can be done with a that can even freeze the whole page (no need to disable your buttons and links!).