XForms/Insert and Delete into Table

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search

Contents

[edit] Motivation

You want to insert and delete records into a table. In this example records are appended to the end of a table but any selected row can be removed. This example does "in-place" table editing. There is no separate form to enable viewing a new record other than in the actual table.

[edit] Screen Image

Screen image right after insert selected

[edit] Sample Program

<html 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"  
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:xf="http://www.w3.org/2002/xforms">
  <head>
    <style type="text/css">
     @namespace xf url("http://www.w3.org/2002/xforms");
 
        * { font-family: Ariel, Helvetica, sans-serif }
 
	.table-header {
	   display: table-row;
	}
 
	.column-header {
	   display: table-cell;
	   text-align: center;
	   width: 185px;
	   color: white;
	   background-color: gray;
	   font-weight: bold;
	}
    </style>
    <title>Demonstration of inserting and deleting records from a table</title>
    <xf:model id="phone-list">
       <xf:instance id="my-phone-list" src="phone-list.xml" xmlns="" />
       <xf:submission id="update-from-local-file" method="get" action="phone-list.xml"
           replace="instance" instance="my-phone-list"/>
       <xf:submission id="view-xml-instance" method="get" action="phone-list.xml" />
       <xf:submission id="save-to-local-file" method="put" action="phone-list.xml" />
    </xf:model>
  </head>
  <body>
 
    <!-- table header -->
    <div class="table-header">
	<div class="column-header">Name</div>
	<div class="column-header">Phone</div>
    </div>
 
    <!-- For each Person in the PersonList display the name and phone-->
    <xf:repeat nodeset="/PhoneList/Person" id="repeatPerson">
	<xf:input id="name-input" ref="Name"/>
	<xf:input ref="Phone"/>
	<br/>
    </xf:repeat>
 
     <xf:trigger>
        <xf:label>Add Person</xf:label>
        <xf:action ev:event="DOMActivate">
	   <xf:insert nodeset="/PhoneList/Person[last()]" position="after" at="last()"/>
	   <xf:setvalue ref="/PhoneList/Person[last()]/Name" value="''"/>
	   <xf:setvalue ref="/PhoneList/Person[last()]/Phone" value="''"/>
	   <!-- put the cursor in the name field -->
	   <xf:setfocus control="name-input"/>
        </xf:action>
     </xf:trigger>
 
     <xf:trigger>
        <xf:label>Delete Person</xf:label>
        <xf:delete nodeset="/PhoneList/Person[index('repeatPerson')]" 
            at="index('repeatPerson')" ev:event="DOMActivate" />
      </xf:trigger>
   <br/>
 
    <xf:submit submission="update-from-local-file">
       <xf:label>Reload</xf:label>
    </xf:submit>
 
    <xf:submit submission="save-to-local-file">
       <xf:label>Save</xf:label>
    </xf:submit>
 
    <xf:submit submission="view-xml-instance">
       <xf:label>View XML Instance</xf:label>
    </xf:submit>
 
  </body>
</html>

[edit] Discussion

This example uses the last() and index() XPath functions to find out what row of the table should be operated on.

Note that after you add the row, you should move the insert cursor to the first field. This is done by using the setfocus element.

[edit] References

Next Page: Highlight Selected Row | Previous Page: Trailing Insert and Delete

Home: XForms

Retrieved from "http://en.wikibooks.org/wiki/XForms/Insert_and_Delete_into_Table"