JSF+Ajax

Witam próbuje uzyskać efekt na stonie taki iż po wybrani odpowiedzniej daty klikam na przycisk a dane pojawiają mi się na tej samej stronie poniżej (bez przeładowania). Ktoś mi podpowiedział że do tego potrzebny jest Ajax.

Moja strona wygląda tak:

<h:form>
            
            <h:panelGrid columns="2" style="margin-bottom: 10px" cellpadding="5">
                <h3>Data poczatkowa:</h3>  
                <p:calendar value="#{zamowienieWsBean.cal.date1}" pattern="yyyy-MM-dd" id="popupCal1"/>
                <h3>Data końcowa:</h3>  
                <p:calendar value="#{zamowienieWsBean.cal.date2}" pattern="yyyy-MM-dd" id="popupCal2"/>
                <p:spacer></p:spacer><p:spacer></p:spacer>
        
                <p:spacer></p:spacer><p:spacer></p:spacer>
                <h:commandButton value="Generuj">
                    <f:ajax execute="@form" onevent="showWorkingIndicator"/></h:commandButton>
                 </h:panelGrid>
                
                <span id="workingIndicator" style="display: none; font-size: 60%">
                   
                    <h:dataTable value="#{zamowienieWsBean.lista}" var="list">
                        <h:column>
                            <f:facet name="header">Nazwa urzadzenia</f:facet>
                            <h:outputText value="#{list.idUsluga.nazwa}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">Zaplata</f:facet>
                            <h:outputText value="#{list.zaplata}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">Dlugosc</f:facet>
                            <h:outputText value="#{list.dlugosc}"/>
                        </h:column>
                    </h:dataTable>
                    
               </span>   
        </h:form>

Do tego napisałem krótki skrypcik w JS odpowiadający za wyświetlenie zawartości span. Odpala się po przyciśnięciu przycisku.

function showWorkingIndicator() {
    showIndicatorRegion("workingIndicator");
}
function showIndicatorRegion(regionId) {
    document.getElementById(regionId).style.display= "inline";
}

I problem polega na tym iż po kliknięciu w przycisk pokazuje mi się zawartość span i od razu znika. Zna ktoś może przyczyne. Z góry dzieki za odp.

Przyczyna jest taka, że masz w spanie display: none
Zmiana tego przez JS trwa do momentu, aż wykona się ajax i na nowo załaduje span z display: none.
Powinieneś zrobić to tak: zamiast span dać <h:panelGroup> z atrybutem rendered. Do rendered przypisz funkcję z beana, który wykonuje akcję inicjowaną buttonem. Przedtem dopisz do buttona parametr action z wywołaniem tej metody. Po wykonaniu wartość rendered musi być ustawiana na true, żeby panel się pokazał.