XForms/刪除確認
< XForms
由於使用者經常花費大量時間輸入資料，因此您需要確保如果您允許他們刪除資料，他們沒有意外點選刪除按鈕，或者他們在實際刪除表單的一部分時選擇了正確的元素。
此示例使用 XForms 的 switch 和 case 語句來有條件地顯示刪除確認對話方塊。這可能不是最優雅的方法。理想情況下，XForms 的未來版本將在刪除觸發器中新增一個 confirm="yes" 選項。但在那之前，您可以使用以下示例。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>XForms Delete Example</title>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
}
label {
font-weight: bold;
}
.header {
color: white;
background-color: gray;
font-weight: bold;
padding: 2px;
}
.header {
width: 370px;
}
.leftColumn, .rightColumn {
display: inline;
}
.leftColumn {
margin-left: 10px;
}
.rightColumn {
position: absolute;
left: 0;
margin-left: 150px;
}
</style>
<xf:model>
<xf:instance id="contacts" xmlns="">
<PhoneList>
<Person>
<Name>Peggy</Name>
<Phone>123</Phone>
</Person>
<Person>
<Name>Dan</Name>
<Phone>456</Phone>
</Person>
<Person>
<Name>John</Name>
<Phone>789</Phone>
</Person>
<Person>
<Name>Sue</Name>
<Phone>234</Phone>
</Person>
<NewPerson>
<Name />
<Phone />
</NewPerson>
<SelectedRow />
</PhoneList>
</xf:instance>
</xf:model>
</head>
<body>
<xf:group nodeset="/PhoneList">
<xf:label class="group-label">Company Phone List</xf:label>
<div class="header">
<div class="leftColumn">Name</div>
<div class="rightColumn">Phone</div>
</div>
<xf:repeat id="contact-repeat" nodeset="Person">
<xf:input ref="Name" class="leftColumn" />
<xf:input ref="Phone" class="rightColumn" />
</xf:repeat>
</xf:group>
<xf:group>
<xf:label class="group-label">Add/Delete Person</xf:label>
<br />
<xf:input ref="NewPerson/Name">
<xf:label>Name:</xf:label>
</xf:input>
<br />
<xf:input ref="NewPerson/Phone">
<xf:label>Phone:</xf:label>
</xf:input>
<br />
<xf:trigger>
<xf:label>Insert After Selected Row</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert nodeset="Person" at="index('contact-repeat')" position="after" />
<xf:setvalue ref="Person[index('contact-repeat')]/Name" value="/PhoneList/NewPerson/Name" />
<xf:setvalue ref="Person[index('contact-repeat')]/Phone" value="/PhoneList/NewPerson/Phone" />
<xf:setvalue ref="SelectedRow" value="index('contact-repeat')" />
</xf:action>
</xf:trigger>
<br />
<xf:switch>
<xf:case id="delete">
<!-- don't display the delete trigger unless we have at lease one person -->
<xf:trigger ref="instance('contacts')[count(//Person) > 1]">
<xf:label>Delete person</xf:label>
<xf:action ev:event="DOMActivate">
<xf:toggle case="confirm" />
</xf:action>
</xf:trigger>
</xf:case>
<xf:case id="confirm">
<h2>Are you sure you want to delete the following:</h2>
<div id="content-for-deletion">
<p>Description: <xf:output ref="Person[index('contact-repeat')]/Name" />
</p>
<p>Value: <xf:output ref="Person[index('contact-repeat')]/Phone" />
</p>
</div>
<xf:trigger>
<xf:label>Delete</xf:label>
<xf:action ev:event="DOMActivate">
<xf:delete nodeset="Person[index('contact-repeat')]" at="index('contact-repeat')" ev:event="DOMActivate" />
<xf:toggle case="delete" />
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Cancel</xf:label>
<xf:toggle case="delete" ev:event="DOMActivate" />
</xf:trigger>
</xf:case>
</xf:switch>
</xf:group>
</body>
</html>
我們使用 XForms 的 switch 和 case 語句來顯示確認對話方塊。對話方塊還指示要刪除的記錄。
此示例不使用 CSS 使對話方塊以單獨的視窗形式顯示在表單上方。可以透過將對話方塊包裝在 div 中並使用 CSS 對 div 進行樣式設定來實現此目的。
將來，我們希望刪除標籤有一個確認選項，例如
<xf:delete confirmation="true" confirmation-message="XPath">
其中顯示的訊息將是確認訊息。
此示例由 Alex Bleasdale 建議。