Xml/Xsl and Ajax

admin · Aug 21, 2008

I am having the following code of xml.

=================================
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href=http://www.webdeveloper.com/forum/archive/index.php/"Hotels.xsl"?>
<Services>
<logo>
<href>logo.jpg</href>
<size width="100"/>
</logo>

<Service>
<Hotels type="radio" title="Hotel" groupname="service" default="true"/>
<HotelsFlights type="radio" title="Flight+Hotel" groupname="service"/>
</Service>

<Hotels>

<Destination title_d="Destination :">
<DestinationPlace type="OPTION" id="" title_d="Select Destination" value_d="Select Destination" defalut="true"/>
<DestinationPlace type="OPTION" id="" title_d="Aruba" value_d="Aruba" />
</Destination>

<HotelChoice title_hc="Hotels :">
<choicedef type="OPTION" id=" " title_h="Select Hotel" value_hdef="Select Hotel"/>
<choice type="OPTION" id=" " title_h="AmsterDam Manor Beach" value_h="AmsterDam Manor Beach" def="sel"/>
<choice type="OPTION" id=" " title_h="Wyndham Aruba Beach" value_h="Wyndham Aruba Beach"/>
</HotelChoice>
</Hotels>

=========================================
and the xsl file is as follows
=========================================
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:template match="/">
<html>
<head>
<script language="javascript">
var Rooms="";
var index="";
function hotelFunc()
{ hctitle.style.display="block";
hdestid.style.display="block";
chkin.style.display="block";
hfid.style.display="none";
hfdestid.style.display="none";
hcftitle.style.display="none";
hotelsflights.style.display="none";

}
function hotelFltFunc()
{
hcftitle.style.display="block";
hotelsflights.style.display="block";
hfdestid.style.display="block";
hdestid.style.display="none";
hctitle.style.display="none";
chkin.style.display="none";

}

function newXmlHttpRequest()
{
var xmlreq;
if(window.XMLHttpRequest)
{
xmlreq = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try
{
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)
{
try
{
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)
{
xmlreq = false;
}
}
}

return xmlreq;
}

function getReadyStateHandler(req,responseTextHandler)
{
return function () {
if(req.readyState==4 || req.readyState=="complete")
{
responseTextHandler(req.responseText);
}
}
}
function showHint(str)
{
var req = newXmlHttpRequest();
alert("String == "+str);
var url = "Hotels.jsp?q=" + str;
req.onreadystatechange = getReadyStateHandler(req,updateSuggestion);
req.open("GET",url,true);
req.send(null);
}
function updateSuggestion(suggText)
{
alert("Sugg Text === "+suggText);
alert("Found At ==== "+suggText.indexOf("/>"));
suggText = suggText.substring(0,suggText.indexOf("/>"));

var el;
var strOutput = "";

dataXML.documentElement.getElementsByTagName("TBL_SEARCHSCRIPT");
strOutput = el[0].attributes.getNamedItem("HOTELS").value;

alert("Hotels === "+strOutput);

document.getElementById("hcid").options.add(new Option(""+suggText,suggText,false));

//value = suggText;

}

</script>
</head>

</html>
<xsl:apply-templates/>

</xsl:template>
<xsl:template match="Services" >
<form name="myform" action="Hotels.jsp" method="get" >
<table bgcolor="lightgreen" width="500" height="200" border="1" >
<tr><td><xsl:apply-templates/></td></tr>
</table>

</form>

</xsl:template>

<xsl:template match="Services/logo">
<table border="0" align="left" valign="top">
<tr><td align="left" valign="top"><image src="{$image_dir}/{href}" width="{size/@width}"/></td></tr>
</table>
</xsl:template>

<xsl:template match="Service/Hotels">
<xsl:value-of select="@title"/>
<input type="{@type}" onClick="hotelFunc()">
<xsl:attribute name="Name">
<xsl:value-of select="@groupname"/>
</xsl:attribute>

<xsl:attribute name="value">
<xsl:value-of select="@value"/>
</xsl:attribute>

<xsl:if test="@default='true'">
<xsl:attribute name="checked"/>
</xsl:if>
</input>
</xsl:template>

<xsl:template match="Hotels/Destination">
<BR/>
<BR/>
<table align="left" border="0">
<tr><td>

<DIV id = "hdestid" style="display:block;">
<xsl:value-of select="@title_d"/>

<SELECT id="dest" name="dest" onchange="showHint(this.selectedIndex);">
<xsl:for-each select="*">
<xsl:element name="{@type}">
<xsl:value-of select="@value_d"/>
</xsl:element>
</xsl:for-each>
</SELECT>
</DIV>

<DIV id = "hfdestid" style="display:none;">
<xsl:value-of select="' Origin: '"/>
<xsl:element name="INPUT">
<xsl:attribute name="size">
<xsl:value-of select="'10'"/>
</xsl:attribute>
</xsl:element>

</DIV>

</td>
</tr>
</table>
</xsl:template>
<xsl:template match="Hotels/HotelChoice">
<table align="center" border="0" width="200">
<tr><td>

<DIV id="hctitle" style="display:block;">
<xsl:value-of select="@title_hc"/>
<SELECT id="hcid" name="hcid">
<xsl:for-each select="*">
<xsl:element name="{@type}">
<xsl:value-of select="@value_hdef"/>
</xsl:element>
</xsl:for-each>

</SELECT>
</DIV>
<DIV id="htall" style="display:none;">
<xsl:value-of select="@title_hc"/>
<SELECT id="htallid" name="htallid">
<xsl:for-each select="*">
<xsl:element name="{@type}">
<xsl:value-of select="@value_h"/>
</xsl:element>
<xsl:if test="@def=$cmbDefault">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:for-each>
</SELECT>
</DIV>

<DIV id="hcftitle" style="display:none;">
<xsl:value-of select="'Destination :'"/>
<SELECT id="dest" name="dest">
<xsl:element name="OPTION">

<xsl:attribute name="size">
<xsl:value-of select="'10'"/>
</xsl:attribute>

<xsl:value-of select="' Wyndham Aruba '"/>

</xsl:element>

</SELECT>

</DIV>
</td>
</tr>
</table>
</xsl:template>
===============================================

I am using ajax in xsl and when i select a destination from the destinations list through ajax i am getting the response in the xml format as below

<TBL_SEARCHSCRIPT HOTELS="A@B@C@D@E">

I have to HOTELS attribute values to the hotel select box.
I am trying to do this in updateSuggestion function.
Pls tell me how to assignthis new xml data to the hotels list box.

thnx,
raj

Xml/Xsl and Ajax

admin

Administrator