using ajax javascript in seam
valatharv Oct 13, 2008 11:55 PMHi,
I have a pair of dropdown list. A selection in the first box should affect list in the second box.
I tried as per below xhtml file, but when I load the page it is blank with no error.
Please suggest how this can be achieved in Seam framework, any sample ?
Example scenario : Dropdown 1 contains list of states, on selecting any state corresponding cities should be populated in second dropdown (I can read the values from text file).
<ui:define name="bodyScripts">
<script type="text/javascript" src="seam/remoting/resource/remote.js">
<!--
// This space intentionally left blank
//-->
</script>
<script type="text/javascript" src="request.js">
<!--
// This space intentionally left blank
//-->
</script>
<script type="text/javascript">
//<![CDATA[
function handleOnChange(dd1)
{
var idx = dd1.selectedIndex;
var val = dd1[idx].text;
var par = document.forms["frmSelect"];
var parelmts = par.elements;
var citysel = parelmts["city"];
var country = val;
if (country != "Select country")
{
var directory = ""+document.location;
directory = directory.substr(0, directory.lastIndexOf('/'));
Http.get({
url: "./" + country + ".txt",
callback: fillcity,
cache: Http.Cache.Get
}, [citysel]);
}
}
function fillcity(xmlreply, cityelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var cityresponse = xmlreply.responseText;
var cityar = cityresponse.split("|");
cityelmt.length = 1;
cityelmt.length = cityar.length;
for (o=1; o < cityar.length; o++)
{
cityelmt[o].text = cityar[o];
}
}
else
{
alert("Cannot handle the Ajax call.");
}
}
// ]]>
</script>
</ui:define>
<ui:define name="main">
<h:form id="select">
<s:decorate id="experimentTypeDecoration" template="layout/edit.xhtml">
<ui:define name="label">Country</ui:define>
<h:selectOneMenu value="country" onchange="handleOnChange(this);">
<f:selectItem itemValue="Select State" itemLabel="Select State"/>
<f:selectItem itemValue="NJ" itemLabel="NJ"/>
<f:selectItem itemValue="CA" itemLabel="CA"/>
<f:selectItem itemValue="FL" itemLabel="FL"/>
</h:selectOneMenu>
</s:decorate>
<h:selectOneMenu value="city">
<f:selectItem itemValue="Select City" itemLabel="Select City"/>
</h:selectOneMenu>
</h:form>
</ui:define>
</ui:composition>
I have a pair of dropdown list. A selection in the first box should affect list in the second box.
I tried as per below xhtml file, but when I load the page it is blank with no error.
Please suggest how this can be achieved in Seam framework, any sample ?
Example scenario : Dropdown 1 contains list of states, on selecting any state corresponding cities should be populated in second dropdown (I can read the values from text file).
<ui:define name="bodyScripts">
<script type="text/javascript" src="seam/remoting/resource/remote.js">
<!--
// This space intentionally left blank
//-->
</script>
<script type="text/javascript" src="request.js">
<!--
// This space intentionally left blank
//-->
</script>
<script type="text/javascript">
//<![CDATA[
function handleOnChange(dd1)
{
var idx = dd1.selectedIndex;
var val = dd1[idx].text;
var par = document.forms["frmSelect"];
var parelmts = par.elements;
var citysel = parelmts["city"];
var country = val;
if (country != "Select country")
{
var directory = ""+document.location;
directory = directory.substr(0, directory.lastIndexOf('/'));
Http.get({
url: "./" + country + ".txt",
callback: fillcity,
cache: Http.Cache.Get
}, [citysel]);
}
}
function fillcity(xmlreply, cityelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var cityresponse = xmlreply.responseText;
var cityar = cityresponse.split("|");
cityelmt.length = 1;
cityelmt.length = cityar.length;
for (o=1; o < cityar.length; o++)
{
cityelmt[o].text = cityar[o];
}
}
else
{
alert("Cannot handle the Ajax call.");
}
}
// ]]>
</script>
</ui:define>
<ui:define name="main">
<h:form id="select">
<s:decorate id="experimentTypeDecoration" template="layout/edit.xhtml">
<ui:define name="label">Country</ui:define>
<h:selectOneMenu value="country" onchange="handleOnChange(this);">
<f:selectItem itemValue="Select State" itemLabel="Select State"/>
<f:selectItem itemValue="NJ" itemLabel="NJ"/>
<f:selectItem itemValue="CA" itemLabel="CA"/>
<f:selectItem itemValue="FL" itemLabel="FL"/>
</h:selectOneMenu>
</s:decorate>
<h:selectOneMenu value="city">
<f:selectItem itemValue="Select City" itemLabel="Select City"/>
</h:selectOneMenu>
</h:form>
</ui:define>
</ui:composition>