如何在JSF中使用模態窗口確認動作？

我有一個JSF MyFaces數據表，它包含一個元素列表和一個刪除按鈕的列。我想要做的就是在點擊刪除按鈕時彈出一個對話框，讓用戶確認或取消操作。如何在JSF中使用模態窗口確認動作？

我已經有對話框（還原爲簡單起見，用<a>因爲缺乏的HTML5支持）：

<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，這當然是模式窗口。我繼承了這種工作方式，並且寧願不改變它，但任何解決方案或想法都將有所幫助。

我可以直接在數據表中使用commandLink，該數據表從視圖中訪問actionToPerform(element)，但當然不會觸發模式。因此，我看到的主要問題是，如果我點擊Delete按鈕，我怎樣才能將element在dataTable中迭代到模態？（我不介意解決方案是否使用Ajax）。

任何輸入都會有幫助。謝謝。

來源

2013-08-07 Mosty Mostacho

的HTML5支持，缺什麼？咦？你的代碼已經在HTML5語法中了？ – BalusC

@BalucC除非我錯過了一些東西，否則我不能使用''並添加一個'data- *'HTML5屬性。 AFAIK，我不得不爲這個工作創建一個新的渲染器。這就是爲什麼我使用'' –

爲什麼你需要''而不是？ – BalusC

好吧，這是一個醜陋的工作解決方案，不需要我重構所有的視圖和託管的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>

我的簡化的dataTable：

<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); 
    } 
}

來源

2013-08-07 15:06:22

如何在JSF中使用模態窗口確認動作？

回答

相關問題