如何在 JSF 中使用模式窗口确认操作？答案

【问题标题】：How to confirm an action using a modal window in JSF?如何在 JSF 中使用模式窗口确认操作？
【发布时间】：2013-08-07 07:11:53
【问题描述】：

我有一个 JSF MyFaces 数据表，其中包含一个元素列表和一个带有删除按钮的列。我要做的就是在单击删除按钮时弹出一个对话框，允许用户确认或取消操作。

我已经有了对话框（为简单起见，由于缺乏 HTML5 支持而使用<a>）：

<div id="myModal">
    <h:form>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{somethingMagicInHere?}">Confirm</h:commandLink>
    </h:form>
</div>

在 dataTable 我有这样的东西（也简化了）：

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <a class="call-modal">Delete</a>
    </h:column>
</h:dataTable>

最后我的 ManagedBean 看起来像这样：

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    ...

    public String actionToPerform(ElementClass e) {
        MyBusinessLogicModel.getInstance().deleteElement(e);
    }
}

所以，简而言之，jQuery 在加载页面时执行并获取所有具有类call-modal 的元素并为它们设置一个onclick，以便它们显示id 为myModal 的组件，这当然是模态窗口.我继承了这种工作方式，不想改变它，但任何解决方案或想法都会有所帮助。

我可以直接在 dataTable 中使用commandLink，它可以从视图中访问actionToPerform(element)，但当然不会触发模式。因此，鉴于这种结构，我看到的主要问题是，单击Delete 按钮后，如何将在dataTable 中迭代的element 发送到模态？（我不介意该解决方案是否使用 Ajax）。

任何输入都会有所帮助。谢谢。

【问题讨论】：

缺乏 HTML5 支持？嗯？你的代码已经是 HTML5 语法了？
@BalucC 除非我遗漏了什么，否则我不能使用<h:link> 并添加data-* HTML5 属性。 AFAIK，我必须创建一个新的渲染器才能工作。这就是我使用<a> 的原因
为什么你需要<h:link>？
我不需要它。但由于这是一个 JSF 项目，我认为将所有 <a> 转换为 <h:link> 是一个不错的主意。在这种情况下，这样做似乎不是关键，因为它似乎只是一个基于data-dismiss 属性分配了一些jQuery 代码的链接。无论如何，我认为使用纯 HTML 或 JSF 呈现 <a> 与问题本身无关。

标签： jsf myfaces

【解决方案1】：

好的，这是一个丑陋但有效的解决方案，不需要我重构所有视图和托管 bean。简而言之：我添加了一个隐藏的输入字段，它将存储要在模态表单中删除的元素的 id。在数据表中，我所做的只是在单击按钮并触发模式后设置隐藏输入字段的值。然后用刚刚更新的值填充模态框。

我的简化模态：

<div id="myModal">
    <h:form id="myForm">
        <h:inputHidden value="#{bean.elementIdInModal}" id="elementIdInModal"/>
        <a data-dismiss="modal">Close</a>
        <h:commandLink action="#{bean[actionToPerform]}">Confirm</h:commandLink>
    </h:form>
</div>

我的简化数据表：

<h:dataTable id="myDataTable" value="#{bean.elementList}" var="element">
    <h:column>
        <f:facet name="header">Actions</f:facet>
        <h:link styleClass="call-modal"
            onclick="$('#myForm\\:elementIdInModal').val(#{element.id})">
            Delete
        </h:link>
    </h:column>
</h:dataTable>

我的简化 ManagedBean：

@ManagedBean(name = "bean")
@RequestScoped
public class ElementClassBean {
    private long elementIdInModal; // Ommiting getters and setters

    public void actionToPerform() {
        MyBusinessLogicModel.getInstance().deleteElement(elementIdInModal);
    }
}

【讨论】：