执行 commandlink 的动作并显示一个对话框答案

【问题标题】：Execute the commandlink's action and show a dialog执行 commandlink 的动作并显示一个对话框
【发布时间】：2015-01-17 19:30:41
【问题描述】：

我对 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 的对话框。

【问题讨论】：

标签： javascript html jsf dialog commandlink

【解决方案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 请求不会重新加载当前页面（但可能会刷新页面的某些部分 - 您也可以使用它来显示对话框）。

【讨论】：

这就是解决方案！非常感谢！！