Execute the commandlink's action and show a dialog

Question

I have a problem with a h:commandlink and a dialog. When clicking on the commandlink i want that a dialog will appear and a java method will execute. I've tried many solutions, but i always could open the dialog OR call the method. Here's a part of the xhtml:

<h:head>        
<script type="text/javascript">
            function addEmployee() {
                window.location.href = "#popupEmployee";
            }
        </script>

</h:head>
<h:body>
    <div id="popupEmployee" class="popupDialog">
        <h1> This is a popup</h1>
    </div>

    <h:form>

            <h:dataTable value="#{controller.employee}" var="m"
                         styleClass="order-table"
                         headerClass="order-table-header"
                         rowClasses="order-table-odd-row,order-table-even-row"                       
                         >

                <h:column>
                    <h:commandLink id="changeEmployee" actionListener="#{controller.changeEmployee}" onclick="addEmployee()"> 
                         <img src="images/stift.png" width="30" heigth="30"/>
                    </h:commandLink>             
                </h:column>

            </h:dataTable>

    </h:form>
    </div>

And in the controller this method should be invoked:

public void changeEmployee(){    
        System.out.println("YEAH!");
}

When click on the commandlink the dialog will appear just for a second and in the url the "#popupEmployee" is deleted. What could I change so the dialog will not disappear?

Note: the div will become a dialog with css.

Answer 1

To get what you need use AJAX request to change server state.

<h:commandLink id="changeEmployee" onclick="addEmployee()">
    <f:ajax listener="#{controller.changeEmployee}"/> 
    <img src="images/stift.png" width="30" heigth="30"/>
</h:commandLink>

Using only h:commandLink submits the form. This results in whole page being reloaded. Because page is reloaded any JavaScript that was invoked on previous page has no effect on new page.

AJAX requests do not reload current page (but might refresh parts of a page - which you can also use to display dialog).