Browse DevX
Sign up for e-mail newsletters from DevX


Add Persistence to Your XML Data Islands-4 : Page 4




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Adding Records
Open up your text editor and create a JScript file containing the code to enable the navigation structure for the application. Save the file as xmlSave.js in the same folder as your XML document. and then save it as xmlSave.js (this code is identical to last month's xmlNav.js, so if you already have that, you can just copy the file):

var currentRecord = 0; function first(){ data.recordset.moveFirst(); currentRecord = 0; } function previous(){ if(data.recordset.absoluteposition>1) { data.recordset.movePrevious(); currentRecord--; } } function next(){ if(data.recordset.absoluteposition < data.recordset.recordcount){ data.recordset.moveNext(); currentRecord++; } } function last(){ data.recordset.moveLast(); currentRecord = data.recordset.recordcount - 1; }

Using ADO to add records is as easy as navigating through them. Add the following to the bottom of the file:

function addRecord(){ //ADO Implementation data.recordset.AddNew(); phoneForm.iName.value = "--Last Name, First Name--"; phoneForm.iExt.value = "--phone--"; phoneForm.iRoom.value = "--location--"; phoneForm.iEmail.value = "--e-mail--"; phoneForm.iNotes.value = "--notes--"; last(); }

The addRecord() function creates a new row, and then sets default values for the new row. The call to the last() function moves the record set pointer to the newly added row. Users can enter new data, move off the record, and then move back to verify that they've successfully added a record.

A better way to add new records is to use the DOM. One easy way to add new records is to include a second data island in the page that points to an XML file that specifies default values for each field. Open your text editor again and create newRecord.xml with the following code:

<?xml version="1.0"?> <record> <name>--Last Name, First Name--</name> <ext>--extension--</ext> <email>--e-mail--</email> <room>--room--</room> <notes>--notes--</notes> </record>

The structure of newRecord.xml is identical to that of a single record in data.xml. Now, add a second data island to the Web page (I added mine directly beneath the first data island):

<xml id="newRecord" src="newRecord.xml"></xml>

Next, modify the addRecord function in xmlSave.js:

function addRecord(){ //DOM Implementation - uses second data island var insRecord = newRecord.XMLDocument.documentElement.cloneNode(true); data.XMLDocument.documentElement.appendChild(insRecord); last(); }

The DOM implementation first clones the newRecord data island. The documentElement property represents the root element, so the clone occurs on everything in the newRecord.xml file. The code creates a new node--insRecord—that contains the cloned document and appends it to the end of the main data island. Finally, the code moves the current record pointer to the newly created record, which (because the HTML document contains bound fields) causes IE to display the new record.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date