<HTML>
<HEAD>
<TITLE>XML Data Binding (form)</TITLE>
<XML ID="ExhibitsDSO" SRC="GetPieces.asp"></XML>
<LINK REL="stylesheet" href="ie.css">
<SCRIPT SRC="xml-proc.js"></SCRIPT>
<SCRIPT>
var CleanXML
function StartPage()
{
CleanXML = ExhibitsDSO.cloneNode(true);
}
function SubmitXML(WhichXML)
{
document.all.XMLSource.value=CalcDiff(CleanXML.documentElement, WhichXML)
FormID.submit()
}
function CompareElements(Reference, New, Element)
{
Was = Reference.selectSingleNode(Element).text;
Is = New.selectSingleNode("//Piece[@id='" + ID + "']/" + Element).text;
if (Was != Is)
return "<" + Element + ">" + Is + "</" + Element + ">"
else
return ""
}
function CalcDiff(ReferenceXML, NewXML)
{
var Result = "<Pieces>"
var Piece = ReferenceXML.firstChild;
while (Piece != null)
{
ID = Piece.attributes.getNamedItem("id").nodeValue;
CleanPiece = true;
TempResult = "<Piece id='" + ID + "'>"
Diff = CompareElements(Piece, NewXML, "Artist")
if (Diff != "") {TempResult += Diff; CleanPiece = false;}
Diff = CompareElements(Piece, NewXML, "Title")
if (Diff != "") {TempResult += Diff; CleanPiece = false;}
Diff = CompareElements(Piece, NewXML, "Description")
if (Diff != "") {TempResult += Diff; CleanPiece = false;}
TempResult += "</Piece>"
if (CleanPiece == false)
Result += TempResult;
Piece = Piece.nextSibling;
}
Result += "</Pieces>"
return Result;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="StartPage();">
<DIV STYLE="font-size:70%;text-align:right;">
<A HREF="javascript:DoWindow(ShowXML(CleanXML.xml));">Show Clean XML</A>
<A HREF="javascript:DoWindow(ShowXML(ExhibitsDSO.xml));">Show Current XML</A>
<A HREF="javascript:DoWindow(ShowXML(CalcDiff(CleanXML.documentElement, ExhibitsDSO)));">Show Diff</A>
<A HREF="javascript:DoWindow(document.body.outerHTML.replace(/</g,'<BR/>&lt;'))">Show HTML</A>
</DIV>
<H1>XML Data Binding and Database Update</H1>
<P>This example shows how an XML data source can be bound to a form. When the doucment loads, a copy of the original XML is saved. By updating the items in the input fields, the main data source is changed. When all changes are made, the "Update Database" button invokes a script that compares the original source with the modified object and creates an XML stream that sends only the differences to a middle-tier script, which updates the database.
<CENTER>
<BR>
<TABLE BORDER="0">
<TR>
<TD>
<INPUT TYPE="BUTTON" VALUE="|< First"
ONCLICK='ExhibitsDSO.recordset.MoveFirst()'>
<INPUT TYPE="BUTTON" VALUE="<< Previous"
ONCLICK='ExhibitsDSO.recordset.MovePrevious()'>
<INPUT TYPE="BUTTON" VALUE="Next >>"
ONCLICK='ExhibitsDSO.recordset.MoveNext()'>
<INPUT TYPE="BUTTON" VALUE="Last >|"
ONCLICK='ExhibitsDSO.recordset.MoveLast()'>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="600">
<TR>
<TD>
<SPAN>
<INPUT DATASRC="#ExhibitsDSO" DATAFLD="Artist" STYLE="width:100%;" TYPE="TEXT" ></INPUT>
</SPAN>
</TD>
<TD WIDTH="200" ROWSPAN="3">
<SPAN>
<IMG DATASRC="#ExhibitsDSO" DATAFLD="Graphic"
WIDTH="200" HEIGHT="250" BORDER="1">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN>
<INPUT DATASRC="#ExhibitsDSO" DATAFLD="Title" STYLE="width:100%;" TYPE="TEXT"></INPUT>
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN>
<TEXTAREA DATASRC="#ExhibitsDSO" DATAFLD="Description"
STYLE="height:200;width:100%;font-family:Verdana;"></TEXTAREA>
</SPAN>
</TD>
</TR>
</TABLE>
<FORM NAME="FormName" ID="FormID" METHOD="POST" ACTION="UpdatePieces.asp">
<INPUT TYPE="HIDDEN" ID="XMLSource" NAME="XMLSource"></INPUT>
</FORM>
<INPUT TYPE="BUTTON" VALUE="Update Database" ONCLICK="javascript:SubmitXML(ExhibitsDSO)">
</CENTER>
</BODY>
</HTML>