执行命令链接的操作并显示一个对话框

Question

我对 h:commandlink 和对话框有疑问。单击命令链接时，我希望会出现一个对话框并执行 java 方法。我尝试了很多解决方案，但我总是可以打开对话框或调用方法。这是 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>

并且在控制器中应该调用这个方法：

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

单击命令链接时，对话框将只显示一秒钟，然后在 url 中删除“#popupEmployee”。我可以更改什么以使对话框不会消失？

注意：div 将成为与 css 的对话框。

Answer 1

要获得所需内容，请使用 AJAX request 更改服务器状态。

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

仅使用 h:commandLink 提交表单。这导致整个页面被重新加载。由于页面已重新加载，因此在上一页上调用的任何 JavaScript 对新页面都没有影响。

AJAX 请求不会重新加载当前页面（但可能会刷新页面的一部分 - 您也可以使用它来显示对话框）。

执行命令链接的操作并显示一个对话框

Execute the commandlink's action and show a dialog

html

javascript

jsf

dialog

commandlink